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

890

7

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

Author:
Nirere Esther

7 months ago

818
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.

Author:
Coastal UI

10 months ago

1.4k
Underline Hover Effect
Hover effect using after and before pseudo elements.

Author:
Carlos Adrian Garcia

1 year ago

9.4k
Popover
basic popover example

Author:
Dipti narayan

2 years ago

13.1k
shoose
shop now

Author:
Nirere Esther

7 months ago

793
school secondary
school

Author:
Nirere Esther

7 months ago

956
Glowing gradient border
on hover glow border

Author:
Prashant

3 years ago

24.6k
Artisan Coffee Crafted with Care
Coffee is one of the world's most beloved beverages, enjoyed by millions daily. Here's an in-depth look at everything coffee-related.

Author:
matoleo chance

7 months ago

805
Custom Carosel

Author:
Md. Tofayel islam

1 year ago

2.9k
game
playing game

Author:
Nirere Esther

7 months ago

584
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

1 year ago

1.6k
Rwanda Investigation Bureau
Rwanda Investigation Bureau

Author:
INGRIDE MUZIRANENGE

7 months ago

541

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