Pulsing Button Effects

A pulse animation applies an opacity ramp to the layers in a symbol. You can choose to animate only layers marked as “always-pulses” or all layers simultaneously. Participating layers reduce their opacity to a minimum value before returning to fully opaque.

This tailwind example is contributed by Augustin, on 22-May-2025. Component is made with Tailwind v3.4. It is responsive.

Hover

Author Augustin

Tailwind v3.4 1.6k 8

Fork Fullscreen

<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pulsing Buttons with Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'pulse-bounce': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, bounce 1s infinite',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .animate-pulse-strong {
                animation: pulse-strong 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            @keyframes pulse-strong {
                0%, 100% {
                    opacity: 1;
                    transform: scale(1);
                }
                50% {
                    opacity: 0.7;
                    transform: scale(1.05);
                }
            }
        }
    </style>
</head>
<body class="min-h-screen bg-gray-100 p-8">
    <div class="max-w-3xl mx-auto space-y-8">
        <h1 class="text-3xl font-bold text-center text-gray-800 mb-12">Pulsing Button Effects</h1>
        
        
        <div class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-xl font-semibold mb-4">1. Basic Pulse Effect</h2>
            <button class="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg animate-pulse">
                Click Me
            </button>
            <p class="mt-3 text-gray-600">Uses Tailwind's built-in <code>animate-pulse</code></p>
        </div>
        
        
        <div class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-xl font-semibold mb-4">2. Ping Effect</h2>
            <button class="relative px-6 py-3 bg-purple-600 text-white font-medium rounded-lg group">
                Subscribe
                <span class="absolute inset-0 rounded-lg bg-purple-600 opacity-0 group-hover:opacity-100 animate-ping"></span>
            </button>
            <p class="mt-3 text-gray-600">Combines <code>animate-ping</code> with hover state</p>
        </div>
        
        
        <div class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-xl font-semibold mb-4">3. Custom Pulse Speed</h2>
            <div class="flex space-x-4">
                <button class="px-6 py-3 bg-green-600 text-white font-medium rounded-lg animate-pulse-slow">
                    Slow Pulse
                </button>
                <button class="px-6 py-3 bg-yellow-600 text-white font-medium rounded-lg animate-pulse-fast">
                    Fast Pulse
                </button>
            </div>
            <p class="mt-3 text-gray-600">Custom animations defined in tailwind.config.js</p>
        </div>
        
        
        <div class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-xl font-semibold mb-4">4. Strong Pulse Effect</h2>
            <button class="px-6 py-3 bg-red-600 text-white font-medium rounded-lg animate-pulse-strong">
                Important Action
            </button>
            <p class="mt-3 text-gray-600">Custom animation with scaling effect</p>
        </div>
        
        
        <div class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-xl font-semibold mb-4">5. Combined Pulse & Bounce</h2>
            <button class="px-6 py-3 bg-pink-600 text-white font-medium rounded-lg animate-pulse-bounce">
                Special Offer!
            </button>
            <p class="mt-3 text-gray-600">Combines pulse and bounce animations</p>
        </div>
        
        
        <div class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-xl font-semibold mb-4">6. Pulse on Hover Only</h2>
            <button class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:animate-pulse transition-all">
                Hover Me
            </button>
            <p class="mt-3 text-gray-600">Animation triggers only on hover</p>
        </div>
    </div>

Related Examples

animals
tourism about animals

Nirere Esther

1 year ago

1.1k
Brand Grid with Hover Effect

ariaw

1 year ago

2k
Onhover underline effect

Dika Rahman

2 years ago

4.4k
home tools
seller goog

Nirere Esther

1 year ago

1.7k
hospital
cares

Nirere Esther

1 year ago

1.3k
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Walid Ahmad

2 years ago

4.2k
shoose
shop now

Nirere Esther

1 year ago

1.4k
Linkedin
chatting

Rebecca IRANKUNDA

1 year ago

1.5k
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Coastal UI

1 year ago

2k
hover grid card
hover over card to change images and contents.

Olajide Olamide (Laemmy)

4 months ago

490
producer
to working songs and films

Nishimwe Jeanine

1 year ago

1.4k
neon-button-purple

Mohammad Rashel

9 months ago

744

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.