Change background color of link/button on hover

Question

I want to change the background color of this link that looks like a button when it is hovered over. How do I do this. Below is the current CSS for it.

input[type="button" i],
input[type="submit" i],
input[type="reset" i],
input[type="file" i]::-webkit-file-upload-button,
button {
  background-color: #fbf7de;
  padding: 9px;
  display: inline;
  border-style: solid; 
  border-color: #fbf7de;
  border-width: 5px;
}

Answer 1

This is basically it - I just reduced your selector for the sake of this example. You can also modify other styles (like border-color ) in the hover state, and add a transition for an animation.

 button { background-color: #fbf7de; padding: 9px; display: inline; border-style: solid; border-color: #fbf7de; border-width: 5px; } button:hover { background: #fff; } 

 <button>Button</button> 

Answer 2

add :hover to the elements

 input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button, a[href]{ background-color:#fbf7de; padding:9px; display:inline; border-style: solid; border-color: #fbf7de; border-width: 5px; } input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="file"]::-webkit-file-upload-button:hover, button:hover, a[href]:hover{ background-color:#ff0000; } 

 <input type="button" value="button"/><br/> <a href="#">anchor</a>