How to change button color on hover in CSS?

To change the button color on hover(mouse over), we can take help of the :hover pseudo-class. A pseudo-class is applied to an element only when the user interacts with it such as hovering, clicking, etc.

In the example below, the button color changes from red to grey when the user hovers over it:

Example:

button{
   background-color: red;
}
button:hover{
   background-color: grey;
}

Change button opacity on hover

Just like changing the background color on hover, we can apply any other CSS property when the user hovers over the button. One simple use case is changing the opacity of the button when the user hovers over the button.

Here is a working example of it:

Example:

button{
   opacity: 1;
}
button:hover{
   opacity: 0.7;
}

In this example, the button opacity changes from 1(default) to 0.7 when the user mouse over it.