Home
Sedat Kumcu
Canlı Yayın Butonu

Canlı Yayın Butonu

Pulse efekt içeren canlı yayın butonu.

This tailwind example is contributed by Sedat Kumcu, on 06-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Transitions

Button Animation

Author Sedat Kumcu

477

1

Fork Fullscreen

<div class="flex justify-center items-center mt-8">
    <a href="https://www.youtube.com/channel/YOUR_CHANNEL_ID" target="_blank"
       class="relative flex items-center justify-center px-6 py-3 bg-red-600 text-white text-lg font-semibold rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200">
        
        <span class="absolute inset-0 rounded-full bg-red-500 opacity-50 animate-ping"></span>
        <span class="relative z-10">Now Live</span>
        
        <svg class="w-7 h-7 ml-2 relative z-10" xmlns="http://www.w3.org/2000/svg" 
        viewBox="0 0 64 64" style="enable-background:new 0 0 64 64" xml:space="preserve"><path style="fill:#ffffff" d="m57.931 54.658-2.216-1.289c3.743-6.432 5.721-13.821 5.721-21.368s-1.979-14.936-5.721-21.368l2.216-1.289C61.901 16.166 64 24.001 64 32c0 7.999-2.099 15.834-6.069 22.658zm-51.862 0C2.099 47.833 0 39.998 0 32S2.099 16.167 6.069 9.342l2.216 1.289C4.542 17.065 2.564 24.454 2.564 32s1.979 14.935 5.721 21.368l-2.216 1.29zm45.32-4.895-2.215-1.292c2.897-4.963 4.428-10.659 4.428-16.471 0-5.8-1.525-11.497-4.41-16.474l2.218-1.286a35.446 35.446 0 0 1 4.755 17.759c.001 6.266-1.651 12.409-4.776 17.764zm-38.778 0C9.486 44.408 7.834 38.265 7.834 32a35.431 35.431 0 0 1 4.756-17.759l2.218 1.286a32.866 32.866 0 0 0-4.41 16.474c0 5.812 1.531 11.508 4.428 16.471l-2.215 1.291zm32.278-4.9-2.218-1.284A23.127 23.127 0 0 0 45.769 32c0-4.076-1.071-8.079-3.098-11.578l2.218-1.284A25.681 25.681 0 0 1 48.332 32a25.68 25.68 0 0 1-3.443 12.863zm-25.778 0A25.69 25.69 0 0 1 15.668 32c0-4.526 1.191-8.973 3.443-12.862l2.218 1.284A23.12 23.12 0 0 0 18.231 32c0 4.075 1.071 8.079 3.098 11.579l-2.218 1.284zm12.615-4.312c-4.716 0-8.553-3.837-8.553-8.553s3.837-8.552 8.553-8.552 8.552 3.836 8.552 8.552-3.836 8.553-8.552 8.553zm0-14.541a5.996 5.996 0 0 0-5.989 5.988 5.996 5.996 0 0 0 5.989 5.989 5.995 5.995 0 0 0 5.988-5.989 5.995 5.995 0 0 0-5.988-5.988z"/><circle style="fill:#ffffff" cx="31.728" cy="31.997" r="5.987"/></svg>
    </a>
</div>

Related Examples

Background gradient changing button
Automatic and continuously gradient-changing button. Cyclic color changing button.

Author:
Ingrid Schulz

1 year ago

9.6k
Button with shadow

Author:
Laurits

2 years ago

11k
Button with hover to button shadow
A beautiful button with a special shadow

Author:
Zayed Hossain

3 months ago

409
Button with loading

Author:
Prem..

2 years ago

17.1k
Settings Button

Author:
Arya

2 years ago

8.9k
Buttons!

Author:
Crimson

1 week ago

55
Animated cards

Author:
Prajwal Hallale

2 years ago

23.7k
Gold Premium Button
🪙 Glowing Premium BIP Gold Button in pue Tailwind CSS

Author:
Arnav K

11 months ago

3.9k
Download on the App Store light button

Author:
Simon Scheffer

1 year ago

12k
Sign in with Google Login Button

Author:
Anonymous

1 month ago

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

Author:
Carlos Adrian Garcia

11 months ago

6.2k
Continue with Discord button
Login with the Discord button for social login

Author:
Anonymous

9 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ 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

© 2025 TailwindFlex. All Rights Reserved.

v1.1