9

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;}
2
  • to change text color use color:#color;
    – user1317647
    Aug 27, 2012 at 9:42
  • to change text-color you need to add this color:#455667
    – Uttara
    Aug 27, 2012 at 9:42

5 Answers 5

7

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!

6
  • thanks for the help - it still doesn't work - am i doing something wrong: 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; color :#2e77ae;} Aug 27, 2012 at 9:51
  • @StephenO'connor Please take a look at this: little link. This uses your same code, and it works on hover.
    – Chris
    Aug 27, 2012 at 9:56
  • thanks - it is not working on my page for some reason - i don't know why but thanks for your help @Abody97 Aug 27, 2012 at 10:06
  • @StephenO'connor Is your page live? Can you provide a link to it? If not, can you please post your full HTML/CSS?
    – Chris
    Aug 27, 2012 at 10:07
  • @StephenO'connor It's because you have a rule: color: rgb(255, 255, 255) !important; remove the !important part and it'll work.
    – Chris
    Aug 27, 2012 at 10:33
2

If you want to change the color of the text, use the CSS color property, like

input[type="submit"]:hover{
   color :#E6D332; 
}
0

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>

Here is what I do:

a:hover{
    color: #ffffff;
}

You can change the 'a' to whatever such as a paragraph 'p' or specify it the html file with a class

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

Them in CSS file do:

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

I hope I could Help.

0
.btn:hover h3{
    color: #FFFFFF;
}

You can write the selectors for elements (such as text) within the <button> after .btn:hover to update those specific elements css properties when hovering on the button.

-1

color:#(insert text color) Put this in

3
  • in the hover section 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; color:#(insert text color)}
    – Johnzo
    Aug 27, 2012 at 9:54
  • @StephenO'connor You should use capital letters I think. So #2E77AE, not #2e77ae
    – Johnzo
    Aug 27, 2012 at 10:07
  • Does matter t #2e77ae OR #2E77AE, Aug 27, 2012 at 10:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.