CODEWITHSUNDEEP
htmlcss
Aamir
Aamir

Reputation: 11

How do you change a button's color only when hovering over it?

Is this what I use? It doesn't seem to be working.

<style>
    button:hover {
    background-color : red;
}
</style>

Upvotes: 0

Views: 67

Answers (2)

rajesh
rajesh

Reputation: 1485

Its all fine with your code but may be it can be possible for override, if it override you can add the new class to the button and selecting the button in css using the class name of the button.

HTML:

    <button class="test">Button</button>

CSS:

    button.test:hover{
    background-color: red;
    }

FIDDLE

Upvotes: 0

Toothbrush
Toothbrush

Reputation: 2141

Perhaps you also want to target <input type="submit"> and other buttons.

You can do that with multiple selectors:

button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
    background-color: red;
}


button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
  background-color: red;
}
<button>Button</button>
<input type="button" value="Button" />

See http://jsfiddle.net/toothbrush7777777/zqgypwzb/1/ for an example.

Upvotes: 2

Related Questions