button

This tailwind example is contributed by Raul antonio de la cruz hernandez, on 14-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Button

Author Raul antonio de la cruz hernandez

336

Fork Fullscreen

<button class="bg-aerospace-orange hover:bg-flame text-seasalt font-bold py-2 px-4 rounded-md transition-all duration-300">
    Botón Primario
  </button>

<button class="bg-federal-blue hover:bg-eerie-black text-seasalt font-bold py-2 px-4 rounded-md transition-all duration-300">
    Botón Oscuro
  </button>

<button class="border-2 border-aero text-aero hover:bg-aero hover:text-seasalt font-bold py-2 px-4 rounded-md transition-all duration-300">
    Botón Contorno
  </button>

<button class="bg-transparent text-eerie-black hover:bg-eerie-black/10 font-bold py-2 px-4 rounded-md transition-all duration-300">
    Botón Sutil
  </button>

<button class="bg-aerospace-orange text-seasalt font-bold py-2 px-4 rounded-md transition-all duration-300 hover:bg-flame hover:shadow-lg hover:shadow-aerospace-orange/40">
    Animación Sombra
  </button>

<button class="bg-federal-blue text-seasalt font-bold py-2 px-4 rounded-md transition-all duration-300 transform hover:scale-105 hover:bg-eerie-black">
    Animación Escala
  </button>

<button class="bg-aero text-federal-blue font-bold py-2 px-4 rounded-md transition-all duration-300 focus:ring-4 focus:ring-aero/50 focus:outline-none">
    Animación Anillo (Click)
  </button>

<button class="border-2 border-flame text-flame hover:bg-flame hover:text-white font-bold py-2 px-4 rounded-md transition-all duration-300">
    Botón Contorno
  </button>
<button
    class="px-4 py-2 border flex gap-2 border-federal-blue rounded-lg text-federal-blue hover:border-federal-bluehover:text-federal-blue hover:shadow transition duration-150">
    <span class="pt-0.5">    Botón Contorno</span>
</button>
</div>

Related Examples

Flame Button

Author:
Carlos Adrian Garcia

1 year ago

2.8k
Glowing gradient button
Button on black background

Author:
Özgür Atmaca

8 months ago

590
shadcn Button
button

Author:
Cristian

1 year ago

2.5k
Button with hover animation

Author:
Andrew

1 year ago

2.4k
Buttons in pair

Author:
Amit Pachange

3 years ago

10.8k
Button With Loader
Tailwind Loader

Author:
Md. Tofayel islam

1 year ago

3k
Free Animated Gradient Glow Button with Tailwind CSS
A modern, responsive Tailwind CSS button with glowing gradient hover effects, smooth animations, and an integrated SVG icon. Perfect for landing pages, call-to-action buttons, or any stylish UI project. Fully customizable and open source , ready to copy, paste, and use in your projects.

Author:
Homayoun

4 months ago

333
Glowing gradient button
Button on black background

Author:
Leon Bachmann

3 years ago

39.2k
Buttons - Htmlwind
Primary buttons

Author:
Htmlwind

8 months ago

545
Animated Light/Dark Mode Toggle
👉🏻3D glow effects on knob & track 👉🏻Gradient transitions that look holographic 👉🏻Animated pulse when active 👉🏻Dark background gradient instead of a flat color 👉🏻Emoji swap (☀️ → 🌙)

Author:
UI-Templates

4 months ago

357
Simple Pagination

Author:
Manuela Bianka

3 years ago

12.1k
Buttons with Icon

Author:
_Amar_

3 years ago

16.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components