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

[jPaulB]

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.

• 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?

<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-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;
            }

 

[VBService]

I want the tip to be fully horizontal and not vertical

add display in 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;
}

<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

Can I modify the tooltip display on an <input type="xx"> statement? | HTML and CSS

Hi everybody, I have several buttons on my forms. so that the buttons themselves look unique. .form-container .submitbtn1 { border-style: groove; border-width: 0.125rem; border-radius: 1.25rem; border-color: #000000; background-image: -webkit-linear-gradient(top left...

www.thecodingforums.com

and this looks fin

<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>