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

8

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

Gradient Button
instagram: ferdiisahin

Author:
Anonymous

11 months ago

1.2k
Get the app section
Play store and App store buttons

Author:
Sophia Baker

2 years ago

8.6k
Sign in with facebook button

Author:
Conan Hilton

2 years ago

10.3k
3D button with hover effect!

Author:
Laurits

2 years ago

16.1k
Previous Next Buttons
Pagination buttons

Author:
Alok

2 years ago

13.2k
beautiful buttons set
a beautofull buttons set like primary, outline and text.

Author:
Akram Khan

5 months ago

604
Button wih hover gradient
Works well with the dark theme

Author:
Leif99

2 years ago

16.4k
Buttons examples

Author:
Manuela Bianka

2 years ago

11.5k
Card
Card with Likes and download Button

Author:
Mrunal Solkar

1 year ago

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

Author:
András Szehofner

2 months ago

472
Animated button with rotating light beam
light beam rotates around the border

Author:
Anonymous

7 months ago

1.6k
Button Dropdown
Drop down button with only tailwind css using focus

Author:
shivam vishvakarma

5 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

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

© 2025 TailwindFlex. All Rights Reserved.

v1.1