Изменить цвет фона ссылки/кнопки на hover

Question

Я хочу изменить цвет фона этой ссылки, которая выглядит как кнопка, когда она зависнет. Как мне это сделать. Ниже приведен текущий CSS.

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

Это в основном это - я просто уменьшил селектор ради этого примера. Вы также можете изменить другие стили (например, border-color) в состоянии зависания и добавить transition для анимации.

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

добавить :hover к элементам

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>