Flame Button

This tailwind example is contributed by Carlos Adrian Garcia, on 27-Apr-2024. Component is made with Tailwind v3.4. It is responsive.

Button

Author Carlos Adrian Garcia

Tailwind v3.4 3.7k 11

Fork Fullscreen

<div class="relative group overflow-hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  class="w-96 h-96 duration-500 ease-in-out transition-all cursor-pointer group-hover:rotate-[1deg] group-hover:animage-pulse z-10">
  <defs>
    <radialGradient id="emeraldGradient" cx="50%" cy="50%" fx="50%" fy="50%" gradient-units="userSpaceOnUse" r="35%">
      <stop  offset="50%" stop-color="#f6d95f" />
      <stop offset="75%" stop-color="#ee7311" />
      <stop  offset="100%" stop-color="#c35000" />
    </radialGradient>
  </defs>
  <path stroke-linecap="round" stroke-linejoin="round"
    class="fill-[#ee7311] group-hover:fill-[#ef7a0d] transition-all duration-500 ease-in-out"
    stroke="url(#emeraldGradient)"
    d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z" />
  <path stroke-linecap="round" stroke-linejoin="round"
    class="fill-[#f6d95f] group-hover:fill-[#f8ffcf] transition-all duration-500 ease-in-out"
    stroke="url(#emeraldGradient)"
    d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  class="absolute scale-[90%] opacity-[0%] top-0 animate-ping w-96 h-96 duration-500 ease-in-out transition-all -z-10">
  <path stroke-linecap="round" stroke-linejoin="round"
    class="fill-[#ee7311] group-hover:fill-[#ef7a0d] transition-all duration-500 ease-in-out"
    stroke="#f6d95f"
    d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z" />
  <path stroke-linecap="round" stroke-linejoin="round"
    class="fill-[#f6d95f] group-hover:fill-[#f8ffcf] transition-all duration-500 ease-in-out"
    stroke="#f6d95f"
    d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z" />
</svg>
</div>

Related Examples

Life Tree
by salvator

Baraka Salvator

1 year ago

1.3k
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

András Szehofner

1 year ago

1.8k
Button with a gradient border using Tailwind CSS

Dipti narayan

3 years ago

13.8k
Continue with Social Login - Continue with Google, LinkedIn, Twitter, Facebook, GitHub, Apple
Streamline your account creation and login process. Use our secure social login buttons to quickly sign in or register using your existing Google, LinkedIn, Twitter, Facebook, GitHub, or Apple account.

Homayoun

11 months ago

831
Neon Morphism button

Akram Khan

2 years ago

2.6k
Sign in with boogle button

Conan Hilton

4 years ago

11k
Sign in with facebook button

Conan Hilton

4 years ago

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

Anonymous

2 years ago

14.3k
pasta
by salvator

Baraka Salvator

1 year ago

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

Anonymous

2 years ago

3.6k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Abdul Baset Bappy

1 year ago

1.5k
Sign in with GitHub Button

Conan Hilton

4 years ago

17.3k

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.