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

1.7k

5

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

Card
Card with Likes and download Button

Author:
Mrunal Solkar

1 year ago

8.8k
Sign in with Google Login Button

Author:
Anonymous

1 month ago

306
Floating feedback button

Author:
Livia Flores

1 year ago

11.6k
Tailwind Different Button Styles
Fully Responsive Buttons

Author:
AKASH GANDHAR

5 months ago

807
Primary Button
Elegant button

Author:
Brandon D

2 years ago

10.4k
Button with Bouncing Animation

Author:
Prashant

2 years ago

12.2k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

6 months ago

956
Button with loading

Author:
Prem..

2 years ago

17.1k
Gradient border button

Author:
Leon Bachmann

2 years ago

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

Author:
S. Patel

1 year ago

21.5k
Previous Next Buttons
Pagination buttons

Author:
Alok

2 years ago

12.5k
Confirm and cancel buttons

Author:
Samuel Dawson

2 years ago

14.2k

Explore components by Tags

Didn't find component you were looking for?

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

© 2025 TailwindFlex. All Rights Reserved.

v1.1