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 v3.4. It is responsive. similar terms for this example is Transitions

Button Animation

Author Sedat Kumcu

Tailwind v3.4 2.4k 6

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

Button with Bouncing Animation

Prashant

4 years ago

15.3k
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Anonymous

2 years ago

14.3k
Botton hover
On hover Changes text

davilaarroyo07

2 years ago

7.5k
Animated button
on hover underline will go from left to right

Anonymous

2 years ago

5.9k
Button
Button When Hover and page Reload then Button text will show the animation

Chitranshu

2 years ago

3.4k
Elevated Buton
On hover merge shadow

Anonymous

2 years ago

3.2k
Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Coastal UI

1 year ago

2.6k
Simple Btn animation

Ranit Saha

1 year ago

2.3k
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

sachin senal

1 year ago

1.8k
Modern page
hero page by salvator

Baraka Salvator

1 year ago

1.9k
chair
by salvator

Baraka Salvator

1 year ago

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

isaSxm

1 year ago

890

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.