I'm trying to change the text of the button when you hover on it, I found a solution but for some reason it won't work.
What I want to happen is when I hover on it it will turn to green and change the text to Completed!
.
Currently the button changes color when I hover on it but the text wont change.
Here's my css:
.button {
border: 0px solid #004B84;
background: red;
padding: 3px 21px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
color: #ffffff;
font-size: 12px;
font-family: Questrial;
text-decoration: none;
vertical-align: middle;
letter-spacing: 2px;
}
.button:hover {
border: 0px solid #1292e1;
background: green;
color: white !important;
content: "Completed!" !important;
}
.button:active {
background: #1292e1;
color: white;
text-decoration: none !important;
}
<button class="button" type="submit" name="completed" value="">New Request</button>
And here's the html for the button:
<button class="button" type="submit" name="completed" value="">New Request</button>
You could do this using a psuedo element.
.button {
width: 150px; /* set a width so it doesnt change upon hover */
border: 0px solid #004B84;
background: red;
padding: 3px 21px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
color: #ffffff;
font-size: 12px;
font-family: Questrial;
text-decoration: none;
vertical-align: middle;
letter-spacing: 2px;
}
.button:hover span {
display:none
}
.button:hover:before {
content:"Completed!";
}
.button:hover {
background-color: green;
}
<button class="button">
<span>New request</span>
</button>
You don't need to touch your HTML (manually adding <span>
tags, manually
removing HTML element content, etc) for this.
Just set the button's text content font-size
to 0px
then add your own text and font-size to the button using :hover
, ::after
and ::after:hover
.
Check and run the following Code Snippet for a practical example of using just CSS to edit your button's content:
.button {font-size: 0px;min-width: 100px;min-height: 22px;}
.button::after {font-size: 14px;}
.button::after {
content: "New Request";
}
.button:hover::after {
content: "Completed!";
}
.button:hover {
background-color: green;
border: 0px solid #1292e1;
color: white !important;
}
<button class="button" type="submit" name="completed" value="">New Request</button>
Just use the textContent() property to change your text on hover (mouseover
) to Completed
and back to New Request
when hovered out (mouseout
).
Check and run the following Code Snippet for a practical example of the JavaScript approach above:
var btn = document.querySelector(".button");
btn.addEventListener("mouseover", function() {
this.textContent = "Completed!";
})
btn.addEventListener("mouseout", function() {
this.textContent = "New Request";
})
.button {
min-width: 100px;
min-height: 22px;
}
.button:hover {
background-color: green;
border: 0px solid #1292e1;
color: white !important;
}
<button class="button" type="submit" name="completed" value="">New Request</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With