How to apply Hover Effect in CSS?

How to apply Hover Effect in CSS?

Last Updated : 19 Nov, 2024

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

How to apply Hover Effect in CSS?

P

pankaj_gupta_gfg

Improve

Article Tags :

Similar Reads

How to create icon hover effect using CSS ?

To style an icon's color, size, and shadow using CSS, use the color property to set the icon's color, font size to adjust its size, and text-shadow or box-shadow for adding shadow effects, creating a visually appealing and dynamic look.Using: hover Pseudo-ClassUsing the: hover pseudo-class, you can

How to Modify Hover Effect using Tailwind CSS ?

In Tailwind CSS, the term "modify hover" refers to changing the styles that are applied to an element when it is hovered over. With Tailwind CSS "hover" variation, you can quickly apply particular utility classes and custom classes to control how components appear when you hover over them, giving yo

How to apply hover effect over button using SASS ?

Animation makes the user experience more beautiful and impressive. With the usage of HTML (HyperText Markup Language) elements and SASS ( Syntactically Awesome Stylesheet), we will design buttons that provide them with a colorful border and an animation effect. We will use Sass because it acts as a

How to make Profile Card Hover Effect using CSS ?

Almost all of us must have heard that 'the first impression is the last impression'. The profile card carries the most important details we should know about a person at the very first instant. A better impression attracts more traffic. So to engage more audience in a website it is very important to

How to Add Shadow Effect on Hover to DIV Boxes in CSS ?

Here are two methods to add shadow effect on hover of a div container in CSS.1. Using box-shadow PropertyThe box-shadow property is used to add shadow effects around an element's frame. You can specify the horizontal and vertical offsets, blur radius, spread radius, and color of the shadow.HTML<!