Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text color change on hover over button

I am trying to change the color of the text inside the button on hover.

I can make the button itself change color, but I want the button text to change color too.

Here is my current css:

button,
input.button,
a.button,
input[type="submit"] {
background:#2e77ae;
background: -moz-linear-gradient(top, #5590bd, #2e77ae);
background: -webkit-linear-gradient(top, #5590bd, #2e77ae);
background: -o-linear-gradient(top, #5590bd, #2e77ae);
background: -ms-linear-gradient(top, #5590bd, #2e77ae);
background: linear-gradient(top, #5590bd, #2e77ae);
border-color:#2e77ae;}

button:hover,
input.button:hover,
a.button:hover,
input[type="submit"]:hover{

    background:#E6D332;
    background: -moz-linear-gradient(top, #E6D332, #E6D332);
    background: -webkit-linear-gradient(top, #E6D332, #E6D332);
    background: -ms-linear-gradient(top, #E6D332, #E6D332);
    background: linear-gradient(top, #E6D332, #E6D332);
    border-color:#2e77ae;}



button:focus,
input.button:focus,
a.button:focus,
input[type="submit"]:focus { 
    background-color:#E6D332;}
like image 826
Stephen O'connor Avatar asked Aug 27 '12 09:08

Stephen O'connor


People also ask

How do you change the text color on a mouseover in HTML?

To change an element's text color on mouseover: Add a mouseover event to the element, changing its text color when the user hovers over it. Add a mouseout event to the element, changing its text color back to the default when the user moves their cursor out.

How do you change the color of button on hovering?

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.

How do I change the color of my text buttons?

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=".


1 Answers

The CSS property color controls the text color in elements generically. In your case, to change the color on hover, use the :hover specifier;

input[type = "submit"]:hover {
    color: #FF0000;
    //you can add more styles to be applied on hover
}

Note that you can as well specify the color using the rgb(x, y, z) format. Here's a little demo to illustrate: little link. You can play around with the demo and view the source here: another little link.

I hope that helped!

like image 89
Chris Avatar answered Oct 22 '22 05:10

Chris