How to Create a Neon Button in CSS

Introduction

A neon button is a glowing, eye-catching design that can be used to make important buttons stand out. This effect is often used in modern, stylish websites to create a futuristic or high-tech look. You can achieve the neon effect using CSS properties like box-shadow, text-shadow, and transition for a glowing, smooth hover animation.

In this tutorial, you'll learn how to create a neon button using CSS.

Problem Statement

Create CSS code that:

Styles a button with neon lighting effects.
Adds a glowing effect to the button when hovered.

Example:

Input: A button element with the text "Neon Button".
Output: A button with neon glow and hover effect.

Solution Steps

Use the <button> Element: Create a button in HTML.
Style the Button: Use CSS to add neon effects like glow and shadows.
Add Neon Glow on Hover: Use the box-shadow and text-shadow properties to create a glowing 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>Neon Button</title>
    <style>
        /* Step 1: Style the neon button */
        .neon-button {
            font-size: 1.5rem;
            color: #fff;
            background-color: #111; /* Dark background */
            padding: 12px 30px;
            border: 2px solid #00ffcc; /* Neon border */
            border-radius: 10px;
            text-transform: uppercase;
            letter-spacing: 3px;
            cursor: pointer;
            transition: all 0.3s ease; /* Smooth transition */
            position: relative;
            box-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc, 0 0 45px #00ffcc;
        }

        /* Step 2: Add hover glow effect */
        .neon-button:hover {
            color: #00ffcc; /* Neon text color */
            background-color: #111; /* Keep dark background */
            box-shadow: 0 0 25px #00ffcc, 0 0 50px #00ffcc, 0 0 100px #00ffcc; /* Stronger neon glow */
            border-color: #00ffcc;
        }

        /* Optional: Add neon text shadow */
        .neon-button:hover::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 10px;
            box-shadow: 0 0 30px #00ffcc, 0 0 60px #00ffcc, 0 0 90px #00ffcc;
            opacity: 0.8;
        }
    </style>
</head>
<body>

    <div style="text-align: center; margin-top: 100px;">
        <button class="neon-button">Neon 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 Neon Button

The .neon-button class defines the basic styling and the neon effect using a combination of box-shadow, border, and color.

.neon-button {
    font-size: 1.5rem;
    color: #fff; /* White text */
    background-color: #111; /* Dark background to enhance glow */
    padding: 12px 30px; /* Padding inside the button */
    border: 2px solid #00ffcc; /* Neon greenish-blue border */
    border-radius: 10px; /* Slightly rounded corners */
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 3px; /* Spacing between letters */
    cursor: pointer; /* Pointer cursor */
    transition: all 0.3s ease; /* Smooth transition effect */
    position: relative;
    box-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc, 0 0 45px #00ffcc; /* Neon glow around the button */
}

box-shadow: 0 0 15px #00ffcc: Creates a soft neon glow around the button.
border: 2px solid #00ffcc: Adds a neon greenish-blue border.
letter-spacing: 3px: Spreads out the letters for a cleaner, modern look.

Step 2: Add Neon Glow on Hover

The hover effect uses the :hover pseudo-class to increase the glow effect when the user hovers over the button.

.neon-button:hover {
    color: #00ffcc; /* Neon text color */
    background-color: #111; /* Keep dark background */
    box-shadow: 0 0 25px #00ffcc, 0 0 50px #00ffcc, 0 0 100px #00ffcc; /* Stronger neon glow */
    border-color: #00ffcc; /* Neon border on hover */
}

box-shadow: 0 0 25px #00ffcc: Increases the intensity of the glow when the button is hovered.
border-color: #00ffcc: Ensures the border color remains neon on hover.

Step 3: Optional: Add Neon Shadow to Button

You can further enhance the neon glow effect by adding a shadow with the ::before pseudo-element:

.neon-button:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px; /* Match the button's border radius */
    box-shadow: 0 0 30px #00ffcc, 0 0 60px #00ffcc, 0 0 90px #00ffcc; /* Intense neon shadow */
    opacity: 0.8;
}

box-shadow: 0 0 30px #00ffcc: Adds additional glowing shadow behind the button for a more dramatic neon effect.

Customization

Change the Neon Color

You can easily change the neon glow color by modifying the hex color code #00ffcc:

.neon-button {
    border: 2px solid #ff00ff; /* Pink neon border */
    box-shadow: 0 0 15px #ff00ff, 0 0 30px #ff00ff, 0 0 45px #ff00ff; /* Pink glow */
}

Adjust Glow Intensity

You can increase or decrease the intensity of the neon glow by modifying the box-shadow values. For a softer glow:

box-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc, 0 0 30px #00ffcc;

Add Animation for Pulsing Glow

To make the button glow pulse continuously, you can add a CSS @keyframes animation:

@keyframes pulse {
    0% {
        box-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc, 0 0 45px #00ffcc;
    }
    50% {
        box-shadow: 0 0 30px #00ffcc, 0 0 60px #00ffcc, 0 0 90px #00ffcc;
    }
    100% {
        box-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc, 0 0 45px #00ffcc;
    }
}

.neon-button {
    animation: pulse 1.5s infinite; /* Pulsing animation */
}

Conclusion

Creating a neon button in CSS is easy and effective using properties like box-shadow and text-shadow to simulate the glowing effect. This effect is perfect for call-to-action buttons and visually appealing designs, and can be customized by adjusting the colors, intensity, and adding animations.

Java Guides

Search This Blog