CSS :hover pseudo-class – Restyle on mouse over



The :hover pseudo-class lets you change the style when the mouse is hovering over the element.


	.btn {

    .btn.gray {

    .btn:hover {
        background-color: #3cb0fd;
        cursor: pointer;

    .btn.gray:hover {
        background-color: #8c8c8c;

<input type="button" class="btn" value="Button 1">
<input type="button" class="btn gray" value="Button 2">


  • Try moving your mouse over each of the buttons to see the new effect.
.btn:hover selector (Line 10)
Create a new style rule that allows us to style the btn class differently when the mouse is hovering over it. All you do is add ":hover" to the end of what you want to style.
cursor property (Line 12)
Change the mouse cursor to the pointer icon, which makes the button appear clickable (like a regular link).
:hover is called a pseudo class
There are also other pseudo classes, such as :visited, which allows you to change the color of visited links.

Practice in Editor

Leave a Comment