- Joined
- Aug 16, 2022
- Messages
- 58
- 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.
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?
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;
}