I need to change the color of a button on hover.
Here is my solution, but it doesn't work.
a.button { display: -moz-inline-stack; display: inline-block; width: 391px; height: 62px; background: url("img/btncolor.png") no-repeat; line-height: 62px; vertical-align: text-middle; text-align: center; color: #ebe6eb; font-family: Zenhei; font-size: 39px; font-weight: normal; font-style: normal; text-shadow: #222222 1px 1px 0; } a.button a:hover{ background: #383; }
To change the background color of the button, use the CSS background-color property and give it a value of a color of your taste. In the . button selector, you use background-color:#0a0a23; to change the background color of the button.
Bootstrap Primary Button Hover Color If you desire to change the styling for the primary button, simply target the . btn-primary class in your CSS file. Any styling you add (i.e. color, background-color, and border-color) will overwrite default bootstrap styling for btn-primary .
Use a semi-colon to separate the different style elements in the HTML button tag. Type color: in the quotation marks after "style=". This element is used to change the text color in the button. You can place style elements in any order in the quotation markers after "style=".
a.button a:hover
means "a link that's being hovered over that is a child of a link with the class button
".
Go instead for a.button:hover
.
Seems your selector is wrong, try using:
a.button:hover{ background: #383; }
Your code
a.button a:hover
Means it is going to search for an a
element inside a
with class 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