Home
Augustin
Pulsing Button Effects

80

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

19

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

Linkedin
chatting

Author:
Rebecca IRANKUNDA

4 days ago

13
school secondary
school

Author:
Nirere Esther

5 days ago

25
coffee shop
shop

Author:
Nezerwa Debora

4 days ago

11
chating
online

Author:
Nezerwa Debora

4 days ago

17
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

9 months ago

2.8k
chating
online chating

Author:
Nirere Esther

5 days ago

23
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

2 weeks ago

69
hospital
cares

Author:
Nirere Esther

6 days ago

11
Link hover effect

Author:
Samuel Dawson

2 years ago

10.6k
Custom Carosel

Author:
Md. Tofayel islam

8 months ago

2k
Card Cartier Product
Card Based View of Cartier

Author:
Ameth Galarcio

3 months ago

418
Underline Hover Effect
Hover effect using after and before pseudo elements.

Author:
Carlos Adrian Garcia

1 year ago

7.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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.1