CSS to implement the mouse to slide through the mouse click Tutorial

The mouse over the element so that the style of the element changes

We define a button label

The code is as follows:

<button class= "Px-button" >BUTTON</button>

We first set the background color of the button to be gray:

The code is as follows:

. px-button{

Background-color:grey;
}

We're going to make the mouse slide over the button and make it blue, we just need to add hover selector:

The code is as follows:

. px-button:hover{

Background-color:blue;

}

We want to make the mouse click the button when it turns red, we only need to increase the active selector:

The code is as follows:

. px-button:active{
background-color:red;
}