Geek Answers Handbook

Change text color when hovering over a button

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

I can force the button to change color myself, but I want the button text to also change color.

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;}
+4
source share
4 answers

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

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

Please note that you can also specify the color using the rgb(x, y, z) format. Here is a small demonstration to illustrate: a small link . You can play with the demo and see the source here: another small link .

I hope this helps!

+4
source

If you want to change the text color, use the CSS color property, for example

 input[type="submit"]:hover{ color :#E6D332; }
+2
source 

 p.one{ color: DarkBlue} p.one:hover{ color: yellow} 
 <html> <head> <title>Css Help</title> <head> <body> <p class="one">Example TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample TextExample Text<p> </body> <html>

That's what I'm doing:

 a:hover{ color: #ffffff; }

You can change "a" to any, such as paragraph "p", or specify its html file with the class

 <p class="one">Example</p>

In the CSS file, execute:

 p.one:hover{ color: #ffffff; }

Hope I could help.

0
source

color:#(insert text color) Put this in

-1
source

More articles:


All Articles