CSS Hover Text Changing Color With Button

Question

So, it's pretty easy to set a hover over effect for an element. But what I want is when the user hovers over a button that has text in it, to make the button turn from black to white and the text from white black at the same time. Instead of two separate elements. How should I do this?

Thanks!

#signUpBox {
    width: 150px;
    height: 47px;
    border-style: solid;
    border-width: 1px;
    margin: auto;
    margin-top: 25px;
    border-radius: 2px;
}

#signUpBox:hover {
    background-color: #ffffff;
}

h3 {
    text-align: center;
    margin-top: -35px;
    letter-spacing: 1px;
    font-size: 17px;
}

...in five minutes you got 5 near identical answers... seems like you know what to do! :-) — Phlume
– Phlume, Commented Jan 24, 2014 at 4:55

Phlume · Accepted Answer · 2014-01-24 04:53:00Z

5

I'm not sure how you have the code set up but this would work on a div with an onclick function attached as a button:

#signUpBox {
    width: 150px;
    height: 47px;
    border: solid 1px #000;
    margin: auto;
    margin-top: 25px;
    border-radius: 2px;
    color:#000;
    background:#fff;

}

#signUpBox:hover {
    background: #000;
    color:#fff;
}

HTML:

<div id="signUpBox">This is a test</div>

DEMO

answered Jan 24, 2014 at 4:53

Phlume

3,1612 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2605157 Over a year ago

The div was the problem! Thanks! I'll answer this up in 6 minutes. I have to wait.

Joe · Accepted Answer · 2014-01-24 04:50:35Z

2

#signUpBox:hover {
    background-color: #ffffff;
    color:#000000;
}

answered Jan 24, 2014 at 4:50

Joe

6081 gold badge9 silver badges18 bronze badges

Comments

jmore009 · Accepted Answer · 2014-01-24 04:50:47Z

2

you can do

#signUpBox:hover h3 {
  color: #000;
}

JSFIDDLE

answered Jan 24, 2014 at 4:50

jmore009

12.9k1 gold badge21 silver badges34 bronze badges

Comments

immayankmodi · Accepted Answer · 2014-01-24 05:08:34Z

2

change text color using color property on hover.

#signUpBox:hover {
    background-color: black;
    color: white;
}

Here is a demo.

edited Jan 24, 2014 at 5:08

answered Jan 24, 2014 at 4:51

immayankmodi

8,63010 gold badges41 silver badges56 bronze badges

2 Comments

Joe Over a year ago

color is to be made black else nothing will be visible.

immayankmodi Over a year ago

@Joseph: see my demo fiddle.

Karuppiah RK · Accepted Answer · 2014-01-24 04:51:48Z

1

#signUpBox {
    width: 150px;
    height: 47px;
    border-style: solid;
    border-width: 1px;
    margin: auto;
    margin-top: 25px;
    border-radius: 2px;
    background: #000000;
    color: #FFFFFF;
}

#signUpBox:hover {
    background: #ffffff;
    color: #000000;
    cursor: pointer;
}

Fiddle

answered Jan 24, 2014 at 4:51

Karuppiah RK

3,9949 gold badges42 silver badges87 bronze badges

Collectives™ on Stack Overflow

CSS Hover Text Changing Color With Button

5 Answers 5

1 Comment

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related