CSS - Change button background color on hover

Question

I need change button background color on hover.

My CSS on jsfiddle: CSS

My HTML :

<input type='button' class='btn btn-default btn-success btn-lg' value='test'/>

this is not your code, you ripped this from some website and expect us to alter it as per your needs. — Banana, Jul 18 '14 at 08:27

Suresh Ponnukalai · Accepted Answer · 2014-07-18T08:07:49.430

17

You can achieve it in the following way. This solution will work if you add this class at the bottom of your CSS.

.btn:hover
{
background-image:none;
background-color:#ff00ff;
}

If you keep this class in top of the other styles, you need to use important keyword to overcome with other styles like below.

.btn:hover
{
background-image:none !important;
background-color:#ff00ff !important;
}

edited Jul 18 '14 at 08:07

answered Jul 18 '14 at 07:59

Suresh Ponnukalai

score 2 · Answer 2 · answered Jul 18 '14 at 08:27

2

you might use this solution as !important make the CSS invalid. In this case all the type= button which have .btn class will only affected.

input[type="button"].btn:hover{background:red;}

answered Jul 18 '14 at 08:27

Kheema Pandey

@user3272321 I would suggest you to not used the `!important` in your CSS file as in w3c validator your CSS file will be failed. you can try the above approach. much better way to handle. – Kheema Pandey Jul 18 '14 at 08:28

score 1 · Answer 3 · answered Jul 18 '14 at 08:01

1

you can achieve using the below

.btn:hover{
//apply styles here
}

answered Jul 18 '14 at 08:01

his question is what style he need to apply. – Suresh Ponnukalai Jul 18 '14 at 08:01
Suresh, I went through his fiddle, I didn't see any .btn:hover there, if we guide him to use the :hover , he can do whatever style he want to do when hovering. – Senthilkumar Manoharan Jul 18 '14 at 08:07

score 0 · Answer 4 · answered Jul 18 '14 at 08:02

0

this is really easy, you just have to add the css selector :hover

for example:

.btn-success:hover{
    color: #ffffff;
   background-color: #51a351;
}

answered Jul 18 '14 at 08:02

MeMTn

score -3 · Answer 5 · answered Jul 18 '14 at 08:00

-3

You can use :hover with the class for the mouse hover event. Like if you want you can use:

btn:hover {
   color:blue; 
}

best of luck

answered Jul 18 '14 at 08:00

Faran Khan

OP is talking about background-color not text color. – Suresh Ponnukalai Jul 18 '14 at 08:10

5 Answers5