Home
Carlos Adrian Garcia
Flame Button

Flame Button

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

Button

Author Carlos Adrian Garcia

2.7k

10

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

button

Author:
Raul antonio de la cruz hernandez

2 months ago

334
sidebar elastico

Author:
Raul antonio de la cruz hernandez

5 months ago

568
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! 🔝💻

Author:
Abdul Baset Bappy

9 months ago

754
Botton hover
On hover Changes text

Author:
davilaarroyo07

1 year ago

7k
File Input
File Input

Author:
Aman kumar

1 year ago

2.6k
strawbery
by salvator

Author:
Baraka Salvator

7 months ago

851
Button With Loader
Tailwind Loader

Author:
Md. Tofayel islam

1 year ago

2.9k
Premium Button Collection with 12 Unique Animations
Collection de 12 boutons premium avec animations uniques : glow, shine, slide, 3D push, neon pulse, glassmorphism, gradient border et plus. Chaque bouton a son propre effet hover. 100% Tailwind CSS, no JavaScript.

Author:
Dolbymat

1 month ago

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

Author:
Ingrid Schulz

2 years ago

11.1k
Primary secondary button pair

Author:
Iris Callahan

1 year ago

1.3k
Get it on Google Play button dark

Author:
Simon Scheffer

3 years ago

12.6k
Continue with Google button
Login with google button for social login.

Author:
S. Patel

2 years ago

24.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

© 2026 TailwindFlex. All Rights Reserved.

v1.12