CSS - Change Button Background Color On Hover

I need change button background color on hover. My CSS on jsfiddle: CSS My HTML : DEMO

Solution 1:

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;
}

DEMO

Solution 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;}

Solution 3:

you can achieve using the below

.btn:hover{
//apply styles here
}

Solution 4:

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

for example:

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

Solution 5:

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