<Button ...> display is fine, except for two things

Joined
Aug 16, 2022
Messages
52
Reaction score
2
Hi Everybody,

I'm still tweaking how my button should display, but I am hung up on two things. I have the HTML and CSS code below.

Capture.PNG

  • The first thing I need to do involves the tooltip that will appear when a visitor hovers over the button. I want the tip to be fully horizontal and not vertical like it appears on the image. What CSS attribute will control that? I assume the attribute belongs in [ .form-container .submitbtn2:after { ] but I have tested all the various width: xxx controls.
  • The second thing I want to do refers to the word "Submit". I want to center that word (vertical and horizontal) in the submitbtn1 button. What CSS attribute will control that?

HTML:
<div class="col-sm-4">
    <p style="text-align: left">
        <button id="bOne" type="reset" class="submitbtn2" data-title="Clear Form and Start Over">Reset</button>
    </p>
</div>
<div class="col-sm-4">
     <p style="text-align: right">
         <button id="bTwo" type="submit" class="submitbtn1" data-title="Submit your Registration">Submit</button>
     </p>
</div>
CSS:
 .form-container .submitbtn2 {
     position: relative;
    height:1.5rem;
    width: auto;
    margin: auto;
    border-style: none;
    border-color: #000000;
    background-color: #94FFC9;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 1rem;
    color: #004001;
    text-decoration: underline;
    text-decoration-color: #004001;
}

.form-container .submitbtn2:hover {
    border-style: none;
    border-color: #000000;
    background-color: #94FFC9;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 1rem;
    color: #FF0000;
    text-decoration: underline;
    text-decoration-color: #FF0000;
}

.form-container .submitbtn2:after {
    content: attr(data-title);
    position: absolute;
    top: calc(1.5rem + .25rem);
    left: 50%;
    transform: translatex(-50%);
    padding: .5rem;
    border-color: #FF0000  ;
    background-color: #000000;
    color: #FFFFFF;
    z-index: 9999;
    opacity: 0;
    transition: opacity 250ms;
}

.form-container .submitbtn2:hover::after {
                opacity: 1;
            }
 
Joined
Jul 4, 2023
Messages
341
Reaction score
39
I want the tip to be fully horizontal and not vertical
add display in css
CSS:
.form-container .submitbtn2:after {
  content: attr(data-title);
  position: absolute;
  display: none;
  top: calc(1.5rem + .25rem);
  left: 0;
  width: 240px;
  ...
  transition: all 250ms;
}

.form-container .submitbtn2:hover::after {
  display: block;
  opacity: 1;
}

HTML:
<style>
  .form-container .submitbtn2 {
    position: relative;
    height:1.5rem;
    margin: auto;
    border-style: none;
    border-color: #000000;
    background-color: #94FFC9;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 1rem;
    color: #004001;
    text-decoration: underline;
    text-decoration-color: #004001;
  }

  .form-container .submitbtn2:hover {
    color: #FF0000;
    text-decoration-color: #FF0000;
  }

  .form-container .submitbtn2:after {
    content: attr(data-title);
    position: absolute;
    display: none;
    top: calc(1.5rem + .25rem);
    left: 0;
    width: 240px;
    padding: .5rem;
    border-color: #FF0000  ;
    background-color: #000000;
    color: #FFFFFF;
    z-index: 9999;
    opacity: 0;
    transition: all 250ms;
  }

  .form-container .submitbtn2:hover::after {
    display: block;
    opacity: 1;
  }
</style>

<form class="form-container">
  <div class="col-sm-4">
    <p style="text-align: left">
      <button id="bOne" type="reset" class="submitbtn2" data-title="Clear Form and Start Over">Reset</button>
    </p>
  </div>
  <div class="col-sm-4">
    <p style="text-align: right">
      <button id="bTwo" type="submit" class="submitbtn1" data-title="Submit your Registration">Submit</button>
    </p>
  </div>
</form>

I want to center that word (vertical and horizontal) in the submitbtn1 button.
You did not provide the code for this button, but I found some code like that at the link


and this looks fin
HTML:
<style>
  .form-container .submitbtn1,
  .form-container .submitbtn2 {
    width: 5rem;
  }
  .form-container .submitbtn1 {
    border-style: groove;
    border-width: 0.125rem;
    border-radius: 1.25rem;
    border-color: #000000;
    background-image: -webkit-linear-gradient(top left, #004001 ,#80FF81 );
    background-image: linear-gradient(to bottom right, #80FF81 , #004001 );
    font-family:  "Comic Sans MS", cursive, sans-serif;
    font-size: 1rem;
    color: #FFFFFF;
  }

  .form-container .submitbtn1:hover {
    background-image: -webkit-linear-gradient(top left, #80FF00 ,#004001 );
    background-image: linear-gradient(to bottom right, #004001 , #80FF81 );
    color: #FFFF00;
  }
  .form-container .submitbtn2 {
    position: relative;
    height:1.5rem;
    margin: auto;
    border-style: none;
    border-color: #000000;
    background-color: #94FFC9;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 1rem;
    color: #004001;
    text-decoration: underline;
    text-decoration-color: #004001;
  }

  .form-container .submitbtn2:hover {
    color: #FF0000;
    text-decoration-color: #FF0000;
  }

  .form-container .submitbtn2:after {
    content: attr(data-title);
    position: absolute;
    display: none;
    top: calc(1.5rem + .25rem);
    left: 0;
    width: 240px;
    padding: .5rem;
    border-color: #FF0000  ;
    background-color: #000000;
    color: #FFFFFF;
    z-index: 9999;
    opacity: 0;
    transition: all 250ms;
  }

  .form-container .submitbtn2:hover::after {
    display: block;
    opacity: 1;
  } 
</style>

<form class="form-container">
  <div class="col-sm-4">
    <p style="text-align: left">
      <button id="bOne" type="reset" class="submitbtn2" data-title="Clear Form and Start Over">Reset</button>
    </p>
  </div>
  <div class="col-sm-4">
    <p style="text-align: right">
      <button id="bTwo" type="submit" class="submitbtn1" data-title="Submit your Registration">Submit</button>
    </p>
  </div>
</form>
 
Last edited:

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,717
Messages
2,569,381
Members
44,699
Latest member
ChristaBya

Latest Threads

Top