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.8k

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

Buttons with shadow

Author:
Leon Bachmann

3 years ago

12.2k
Simple Btn

Author:
Abid Ullah

1 year ago

2.2k
Fancy leaf like button

Author:
_Amar_

3 years ago

11.9k
Primary and secondary button pair
Call to action buttons

Author:
Manuela Bianka

3 years ago

16.8k
Disabled Button & Active Button

Author:
Dipti narayan

2 years ago

37.7k
Payment Button

Author:
Md. Tofayel islam

1 year ago

3.3k
gradient button

Author:
Akram Khan

1 year ago

1.9k
Listen on Spotify/Apple Music Button

Author:
Patricio Garcia

1 year ago

2.7k
Floating buttons examples
Bottom-Right Corner, Bottom-Left Corner, Top-Left Corner, Top-Right Corner, Center, Bottom-Center

Author:
Livia Flores

2 years ago

25.6k
Playstore Button
Download on the play store button

Author:
Arya

3 years ago

14.8k
modern portifolio
by salvator

Author:
Baraka Salvator

8 months ago

792
Buttons popup on hover
Popup buttons on hover

Author:
Sophia Baker

3 years ago

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