How to Add Glow Effect to a Button in CSS

Author:

Introduction

A glowing button can make your website more visually engaging and draw attention to important actions like "Submit" or "Call to Action" buttons. The glow effect is achieved using CSS properties like box-shadow and transition to create a smooth and interactive visual.

In this tutorial, you'll learn how to create a glow effect for a button using CSS, with optional hover and animation effects to enhance the interactivity.

Development Steps

  1. Use the <button> Element: Create the button in HTML.
  2. Add Glow Effect with CSS: Use box-shadow to create the glow effect.
  3. Add Hover Effect (Optional): Enhance the glow when the user hovers over the button.

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>Glow Button</title>
    <style>
        /* Step 1: Style the button and add glow effect */
        .glow-button {
            font-size: 1.5rem;
            color: white;
            background-color: #3498db;
            padding: 10px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: box-shadow 0.3s ease; /* Smooth transition for hover */
            box-shadow: 0 0 15px rgba(52, 152, 219, 0.75); /* Initial glow effect */
        }

        /* Step 2: Increase the glow effect on hover */
        .glow-button:hover {
            box-shadow: 0 0 30px rgba(52, 152, 219, 1), 0 0 60px rgba(52, 152, 219, 0.5); /* Stronger glow on hover */
        }
    </style>
</head>
<body>

    <div style="text-align: center; margin-top: 100px;">
        <button class="glow-button">Glow Button</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 and Add the Glow Effect

The .glow-button class is used to style the button and create a glowing effect using the box-shadow property.

.glow-button {
    font-size: 1.5rem;
    color: white;
    background-color: #3498db; /* Blue background */
    padding: 10px 30px; /* Button padding */
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    transition: box-shadow 0.3s ease; /* Smooth transition for hover */
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.75); /* Initial glow effect */
}

  • box-shadow: 0 0 15px rgba(52, 152, 219, 0.75): This creates a glowing effect around the button by adding a shadow. The first two values (0 0) define the horizontal and vertical offset, and 15px is the blur radius, which determines how far the glow spreads. The color of the glow is blue, with 75% opacity.

  • transition: box-shadow 0.3s ease: This ensures that the glow smoothly transitions when the user hovers over the button.

Step 2: Increase the Glow on Hover

When the user hovers over the button, the glow effect becomes more pronounced.

.glow-button:hover {
    box-shadow: 0 0 30px rgba(52, 152, 219, 1), 0 0 60px rgba(52, 152, 219, 0.5);
}

  • box-shadow: 0 0 30px rgba(52, 152, 219, 1): On hover, the glow becomes stronger with a blur radius of 30px and full opacity (1).

  • 0 0 60px rgba(52, 152, 219, 0.5): This second shadow creates an additional outer glow with a larger blur radius of 60px, giving the button a more dramatic glowing effect.

Customization

Change the Glow Color

You can easily change the glow color by modifying the rgba color values in the box-shadow property. For example, for a green glow:

.glow-button {
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.75);
}

.glow-button:hover {
    box-shadow: 0 0 30px rgba(46, 204, 113, 1), 0 0 60px rgba(46, 204, 113, 0.5);
}

Add Animation to the Glow Effect

You can add continuous pulsing animation to the button using CSS @keyframes:

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 15px rgba(52, 152, 219, 0.75);
    }
    50% {
        box-shadow: 0 0 30px rgba(52, 152, 219, 1), 0 0 60px rgba(52, 152, 219, 0.5);
    }
    100% {
        box-shadow: 0 0 15px rgba(52, 152, 219, 0.75);
    }
}

.glow-button {
    animation: glowPulse 2s infinite; /* Continuous glow animation */
}

This animation creates a continuous pulsing glow effect around the button.

Conclusion

Adding a glow effect to a button in CSS is easy and can make your call-to-action elements stand out. By using the box-shadow property, you can create a glowing button with various colors and intensities. Adding hover effects or animations further enhances the visual appeal and interactivity of the button, making it more engaging for users.

Comments

Post a Comment

Leave Comment