How to Change Button Color in CSS

Introduction

Changing the color of a button in CSS is easy. You can use the background-color property to change the button's background and the color property to change the text color. Adding a hover effect makes the button interactive and changes its color when the user moves the mouse over it.

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

Problem Statement

Create a button that:

Has a specific background color and text color.
Changes color when the user hovers over it.

Example:

Input: A button with the text "Submit".
Output: A button that changes color on hover.

Solution Steps

Create the Button in HTML: Use the <button> element.
Style the Button with CSS: Change the button's background and text color.
Add a Hover Effect: Use the :hover pseudo-class to change the button color on hover.

HTML Structure

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

        /* Step 2: Change color on hover */
        .color-button:hover {
            background-color: #2ecc71; /* Change to green on hover */
        }

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

    <div class="container">
        <button class="color-button">Submit</button>
    </div>

</body>
</html>

Explanation

Step 1: Style the Button

The .color-button class styles the button using several CSS properties:

.color-button {
    font-size: 1.2rem;
    color: white; /* Text color */
    background-color: #3498db; /* Button background color */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth color change */
}

font-size: 1.2rem: This sets the size of the text inside the button to 1.2rem. It makes the text slightly larger than the default size.
color: white: This property changes the color of the text inside the button. We set it to white to make it readable against the blue background.
background-color: #3498db: This property sets the background color of the button to a blue shade (#3498db). You can replace the color code with any color you like.
padding: 10px 20px: This adds space inside the button. The first value (10px) controls the vertical padding (top and bottom), while the second value (20px) controls the horizontal padding (left and right).
border: none: This removes the default border around the button, making it look cleaner.
border-radius: 5px: This rounds the corners of the button. A higher value would give more rounded corners, and a value of 0 would make the button square.
cursor: pointer: This changes the mouse cursor to a pointer when the user hovers over the button, signaling that the button is clickable.

Step 2: Add Hover Effect

The hover effect is applied using the :hover pseudo-class. This changes the background color when the user hovers over the button.

.color-button:hover {
    background-color: #2ecc71; /* Change to green on hover */
}

:hover: This pseudo-class applies styles when the user hovers over the button. In this case, the button's background color changes.
background-color: #2ecc71: This changes the button's background color to green when the user hovers over it.

Step 3: Smooth Transition

The transition property is used to make the color change smooth rather than instant.

.color-button {
    transition: background-color 0.3s ease; /* Smooth color change */
}

transition: This property allows you to animate changes. In this case, it makes the background color change over 0.3s (300 milliseconds) when hovered.
ease: This keyword ensures that the transition starts slowly, speeds up, and then slows down at the end.

Step 4: Center the Button

To center the button on the page, use the following CSS:

.container {
    text-align: center;
    margin-top: 100px;
}

text-align: center: This centers the button horizontally within its container.
margin-top: 100px: This adds space above the button, so it's not too close to the top of the page.

Output

Conclusion

You can easily change the button's color in CSS with the background-color and color properties. Adding a hover effect with :hover makes the button interactive, and the transition property creates a smooth effect when the color changes. This helps make your button more visually appealing and user-friendly.

Java Guides

Search This Blog