How to Add Hover Text Shadow to Button in CSS

Introduction

Adding a hover text shadow to a button enhances its visual appeal and interactivity. The text-shadow property in CSS allows you to create various shadow effects for the text inside the button. You can also combine this with the :hover pseudo-class to apply the effect when the button is hovered.

In this tutorial, you’ll learn how to add a text shadow to a button that becomes visible on hover.

Problem Statement

Create CSS code that:

Styles a button.
Adds a text shadow effect when the button is hovered.

Example:

Input: A button element with the text "Hover Me".
Output: A button with a text shadow effect when hovered.

Solution Steps

Use the <button> Element: Create the button in HTML.
Style the Button: Define the button’s appearance with CSS.
Add Hover Text Shadow Effect: Use the text-shadow property and :hover pseudo-class to apply the effect 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>Button with Hover Text Shadow</title>
    <style>
        /* Step 1: Style the button */
        .shadow-button {
            font-size: 1.5rem;
            color: white;
            background-color: #3498db;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: text-shadow 0.3s ease; /* Smooth transition */
        }

        /* Step 2: Add hover text shadow effect */
        .shadow-button:hover {
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Text shadow on hover */
        }
    </style>
</head>
<body>

    <div style="text-align: center; margin-top: 100px;">
        <button class="shadow-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 .shadow-button class is used to style the button with basic properties like font size, background color, and padding.

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

color: white: Sets the initial text color to white.
transition: text-shadow 0.3s ease: Ensures the text shadow smoothly appears when the button is hovered.

Step 2: Add Hover Text Shadow Effect

The :hover pseudo-class applies the text shadow when the user hovers over the button.

.shadow-button:hover {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Add text shadow on hover */
}

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5): This adds a text shadow with the following properties:
- 2px: Horizontal shadow offset.
- 2px: Vertical shadow offset.
- 5px: Blur radius for a soft shadow.
- rgba(0, 0, 0, 0.5): Black shadow color with 50% opacity.

Customization

Change the Shadow Color

You can change the shadow color by adjusting the rgba value. For example, to make a red shadow:

.shadow-button:hover {
    text-shadow: 2px 2px 5px rgba(255, 0, 0, 0.5); /* Red shadow */
}

Add Multiple Shadows

You can also apply multiple text shadows by separating them with commas:

.shadow-button:hover {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 255, 255, 0.5);
}

This creates a dual shadow effect with black and white shadows.

Conclusion

Adding a hover text shadow to a button in CSS is simple using the text-shadow property in combination with the :hover pseudo-class. This technique improves button interactivity, making it visually appealing when hovered.

Java Guides

Search This Blog