Home
Augustin
Pulsing Button Effects

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 CSS v3. It is responsive.

Hover

Author Augustin

1.1k

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

neon-button-purple

Author:
Mohammad Rashel

2 months ago

419
Brand Grid with Hover Effect

Author:
ariaw

11 months ago

1.6k
hospital
cares

Author:
Nirere Esther

9 months ago

826
Feature Card

Author:
Md. Tofayel islam

1 year ago

1.7k
coffee shop
shop

Author:
Nezerwa Debora

9 months ago

804
Game
prayer candle game light candles with you prayer

Author:
Nezerwa Debora

9 months ago

405
Button with hover effect
Button with light hover effect, responsive and suitable for light/dark mode.

Author:
isaSxm

6 months ago

429
Uses emoji for attention, mentions key features (modern, responsive, accessible)
Drop-in Tailwind CSS profile card component with responsive layout, gradient header, and hover effects - zero custom CSS needed. Features skill tags, social icons, and clean stats display. Just copy-paste the HTML, swap in your details, and you're live. Perfect for portfolios, developer profiles, or link-in-bio pages.

Author:
Muhammad Umair Arshad

10 months ago

1.1k
shoose
shop now

Author:
Nirere Esther

9 months ago

842
Card
travel place card hover effect card

Author:
nahid hasan

1 year ago

2.1k
producer
to working songs and films

Author:
Nishimwe Jeanine

8 months ago

739
Popover
basic popover example

Author:
Dipti narayan

2 years ago

13.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12