How to Add Hover Color Change to Button 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 color change to a button enhances interactivity by giving users visual feedback when they hover over the button. This is a common practice in modern web design to make buttons feel more dynamic and engaging. You can easily achieve this effect using CSS by applying the :hover pseudo-class.

In this tutorial, you'll learn how to add a hover color change effect to a button using CSS.

Development Steps

Use the <button> Element: Create the button in HTML.
Style the Button: Use CSS to define the button’s appearance.
Add Hover Effect: Use the :hover pseudo-class to change the button's background color when hovered.

HTML and CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Color Button</title>
    <style>
        /* Step 1: Style the button */
        .hover-button {
            font-size: 1.5rem;
            color: white;
            background-color: #3498db;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease; /* Smooth transition effect */
        }

        /* Step 2: Add hover effect to change background color */
        .hover-button:hover {
            background-color: #2980b9; /* Darker blue on hover */
        }
    </style>
</head>
<body>

    <div style="text-align: center; margin-top: 100px;">
        <button class="hover-button">Hover Me</button>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Style the Button

The .hover-button class is used to style the button with basic properties like font size, color, background color, padding, and border-radius.

.hover-button {
    font-size: 1.5rem;
    color: white;
    background-color: #3498db; /* Blue background */
    padding: 12px 30px; /* Padding inside the button */
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

background-color: #3498db: This sets the initial background color of the button to blue.
border-radius: 5px: Gives the button slightly rounded corners.
transition: background-color 0.3s ease: Ensures that the background color smoothly changes over 0.3 seconds when the button is hovered.

Step 2: Add Hover Effect

When the user hovers over the button, the background color changes to a darker blue.

.hover-button:hover {
    background-color: #2980b9; /* Darker blue on hover */
}

:hover: This is the pseudo-class that applies the styles when the button is hovered.
background-color: #2980b9: Changes the background color to a darker shade of blue when the user hovers over the button.

Customization

Change Text Color on Hover

You can also change the text color when the button is hovered by adding color inside the :hover block:

.hover-button:hover {
    background-color: #2980b9; /* Darker blue */
    color: yellow; /* Change text color to yellow */
}

Add Box Shadow on Hover

To make the button more dynamic, you can add a shadow effect when it's hovered:

.hover-button:hover {
    background-color: #2980b9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
}

Conclusion

Adding a hover color change to a button in CSS is simple using the :hover pseudo-class. This improves user interaction by providing visual feedback, making your buttons more dynamic and engaging.

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