How to Add Animation on Hover in CSS

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Introduction

Adding a hover effect can make buttons and other elements more interactive. In this guide, we'll walk through how to add a smooth hover animation to a button using CSS. The animation will change the button's background color, text color, and size when a user hovers over it.

Development Steps

Create Basic HTML: Set up the HTML structure with a button inside a centered container.
Add CSS for the Button: Define the base style for the button.
Add the Hover Animation: Style the button's appearance when hovered.

Step 1: Create Basic HTML

We’ll start by creating a simple HTML structure. The button will be inside a container that centers it on the page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Animation Example</title>
</head>
<body>

    <!-- Step 1: Container with button -->
    <div class="container">
        <button class="hover-button">Hover Me</button>
    </div>

</body>
</html>

Explanation:

The <div class="container"> centers the button on the page.
The <button class="hover-button"> element will be styled with the hover animation.

Step 2: Add CSS for the Button

Now, we’ll define the base style of the button, including font size, border, background, and color.

/* Step 1: Define base button style */
.hover-button {
    font-size: 1.5rem;
    color: #3498db; /* Text color */
    padding: 10px 20px;
    border: 2px solid #3498db; /* Blue border */
    background-color: transparent; /* Transparent background */
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transition on hover */
    font-family: Arial, sans-serif;
    display: inline-block;
}

Explanation:

font-size: 1.5rem;: Sets a larger font size for the button text.
color: #3498db;: Makes the text blue.
border: 2px solid #3498db;: Adds a blue border around the button.
background-color: transparent;: The button background is transparent by default.
transition: all 0.3s ease;: Smoothly animates any style changes on hover.

Step 3: Add the Hover Animation

Now, we’ll define what happens when the user hovers over the button. We'll change the background color, text color, and slightly increase the button size.

/* Step 2: Define hover animation */
.hover-button:hover {
    background-color: #3498db; /* Change background to blue */
    color: white; /* Change text color to white */
    transform: scale(1.1); /* Slightly enlarge the button */
}

Explanation:

background-color: #3498db;: Changes the background color to blue on hover.
color: white;: Changes the text color to white when hovered.
transform: scale(1.1);: Enlarges the button by 10% when hovered, giving it a pop-out effect.

Step 4: Center the Button

Lastly, we’ll add styles to center the button on the page using a container.

/* Center the container */
.container {
    text-align: center;
    margin-top: 100px;
}

Explanation:

text-align: center;: Centers the button horizontally within the container.
margin-top: 100px;: Adds space above the button to vertically center it on the page.

Complete Code Example

Here’s the complete HTML and CSS code to create a hover animation for the button:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Animation Example</title>
    <style>
        /* Step 1: Define base button style */
        .hover-button {
            font-size: 1.5rem;
            color: #3498db;
            padding: 10px 20px;
            border: 2px solid #3498db;
            background-color: transparent;
            cursor: pointer;
            transition: all 0.3s ease; /* Smooth transition on hover */
            font-family: Arial, sans-serif;
            display: inline-block;
        }

        /* Step 2: Define hover animation */
        .hover-button:hover {
            background-color: #3498db;
            color: white; /* Change text color to white */
            transform: scale(1.1); /* Slightly enlarge the button */
        }

        /* Center the container */
        .container {
            text-align: center;
            margin-top: 100px;
        }
    </style>
</head>
<body>

    <div class="container">
        <button class="hover-button">Hover Me</button>
    </div>

</body>
</html>

Output

Conclusion

In this guide, you learned how to create a hover animation for a button using CSS. The button smoothly changes color and size when hovered over, providing a more interactive experience for users. You can easily customize this effect to fit your design by adjusting the colors, transitions, or animations.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog