How to Create a Pulse Button in CSS

Introduction

A pulse button is a type of button that repeatedly "pulses," creating a visual effect that draws attention. This effect can be achieved by animating the button using CSS keyframes and the transform and opacity properties. The pulse effect is a great way to highlight call-to-action buttons on your website.

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

Problem Statement

Create a CSS code that:

Styles a button.
Adds a pulse effect using CSS keyframes and animations.

Example:

Input: A button element with the text "Pulse Button".
Output: A button with a continuous pulsing effect.

Solution Steps

Use the <button> Element: Create the button in HTML.
Style the Button with CSS: Define the button's appearance.
Add a Pulse Effect with Keyframes: Use keyframes and animation properties to create the pulse effect.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pulse Button</title>
    <style>
        /* Step 1: Style the button */
        .pulse-button {
            font-size: 1.5rem;
            color: white;
            background-color: #3498db;
            padding: 10px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            outline: none;
            box-shadow: 0 4px #2980b9;
            transition: box-shadow 0.3s ease;
            position: relative;
        }

        /* Step 2: Add pulse animation */
        .pulse-button::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: rgba(52, 152, 219, 0.5); /* Lighter blue pulse */
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            animation: pulse 1.5s infinite; /* Repeating pulse animation */
        }

        /* Step 3: Keyframes for pulse effect */
        @keyframes pulse {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(1.5);
                opacity: 0;
            }
        }

        /* Step 4: Optional hover effect */
        .pulse-button:hover {
            box-shadow: 0 6px #2980b9;
        }
    </style>
</head>
<body>

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

The .pulse-button class is used to style the button with basic properties like background color, padding, border radius, and box shadow.

.pulse-button {
    font-size: 1.5rem;
    color: white;
    background-color: #3498db; /* Blue background */
    padding: 10px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    box-shadow: 0 4px #2980b9; /* Box shadow to create a 3D look */
    transition: box-shadow 0.3s ease;
    position: relative; /* Allows pseudo-elements to position correctly */
}

box-shadow: 0 4px #2980b9: This creates a shadow beneath the button, giving it depth.
position: relative: This is important because the pulse effect is positioned using the ::after pseudo-element.

Step 2: Add Pulse Effect

The ::after pseudo-element creates a circular element behind the button, which will pulse.

.pulse-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Creates a circle */
    background-color: rgba(52, 152, 219, 0.5); /* Lighter blue for pulse effect */
    transform: translate(-50%, -50%) scale(1); /* Center and scale the pulse */
    opacity: 1;
    animation: pulse 1.5s infinite; /* Continuous pulse animation */
}

border-radius: 50%: Ensures the pulse effect is circular.
transform: translate(-50%, -50%): Centers the pulse effect exactly over the button.
animation: pulse 1.5s infinite: This applies the pulse animation, which repeats every 1.5 seconds.

Step 3: Keyframes for Pulse Effect

The @keyframes animation defines how the pulse effect grows and fades.

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

0%: The pulse starts at full size (scale(1)) and full opacity (opacity: 1).
100%: The pulse grows larger (scale(1.5)) and fades out (opacity: 0).

Step 4: Optional Hover Effect

To enhance interactivity, the button's shadow can change when hovered.

.pulse-button:hover {
    box-shadow: 0 6px #2980b9; /* Slightly deeper shadow on hover */
}

Conclusion

Creating a pulse button in CSS is simple with the help of keyframes and animations. By animating the button's ::after pseudo-element, you can achieve a continuous pulsing effect that draws attention to the button. This effect is great for call-to-action buttons and can easily be customized by adjusting the animation speed, scale, and opacity.

Java Guides

Search This Blog