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

666

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

game
playing game

Author:
Nirere Esther

6 months ago

405
Rwanda Investigation Bureau
Rwanda Investigation Bureau

Author:
INGRIDE MUZIRANENGE

5 months ago

461
chating
online

Author:
Nezerwa Debora

6 months ago

558
home tools
seller goog

Author:
Nirere Esther

6 months ago

746
news coffee &tea
According to large population studies, coffee and tea both appear to be good for your heart, lowering risk for heart disease and stroke.

Author:
Augustin

6 months ago

407
Linkedin
chatting

Author:
Rebecca IRANKUNDA

6 months ago

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

Author:
Robert Chunga

1 year ago

2.4k
animals
tourism about animals

Author:
Nirere Esther

6 months ago

618
Divine Shree Ram Hero Section | Tailwind CSS Responsive UI for Devotional |Hero section |Hero
Explore a stunning and responsive Hero Section dedicated to Lord Ram, crafted with Tailwind CSS. Perfect for spiritual brands, Ramayana-inspired products, or devotional e-commerce platforms. Fully responsive, dark mode compatible, and animation-rich UI.

Author:
Rajesh Pandey

6 months ago

723
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

6 months ago

733
Popover
basic popover example

Author:
Dipti narayan

2 years ago

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

Author:
Walid Ahmad

1 year ago

3.5k

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

© 2025 TailwindFlex. All Rights Reserved.

v1.12