Open In App

How to apply Hover Effect in CSS?

Last Updated : 19 Nov, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The :hover pseudo-class in CSS is used for styling when an element is hovered over by a cursor.

Syntax

a:hover {
    // CSS Styles...
}
HTML 
<!DOCTYPE html>
<html>

<head>
    <style>
        .hover-button {
            background-color: #4CAF50;
            padding: 15px 30px;
            font-size: 16px;
            cursor: pointer;
        }

        .hover-button:hover {
            background-color: #254d27;
            color: white;
        }
    </style>
</head>

<body>
    <h3>Hover Effect Example</h3>
    <button class="hover-button">Hover Over Me!</button>
</body>

</html>

Output

hover-effect
hover effect

P

pankaj_gupta_gfg
Improve
Article Tags :

Explore

Lightbox