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

what is the _i_ following the type attribute predicates? is that supposed to match an `` tag? — Sᴀᴍ Onᴇᴌᴀ, Nov 28 '16 at 18:03
@SamOnela - "Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range)." https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors — j08691, Nov 28 '16 at 18:04
Possible duplicate of [How to use 'hover' in CSS](http://stackoverflow.com/questions/905033/how-to-use-hover-in-css) — tyler mackenzie, Nov 28 '16 at 20:47

score 2 · Answer 1 · answered Nov 28 '16 at 18:04

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>

score 0 · Answer 2 · answered Nov 28 '16 at 18:06

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>

Change background color of link/button on hover

2 Answers2