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

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

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

Author:
Akram Khan

1 year ago

1.5k
App store & Google playstore buttons

Author:
Dika Rahman

1 year ago

2.5k
Animated Gradient Button Component
Button component with smooth hover effects and glass-morphism design. Features expanding gradient animation, rotating icon, and responsive layout. Perfect for call-to-action buttons, landing pages, and web applications. Easy copy-paste Tailwind CSS code ready for integration.

Author:
Homayoun

3 months ago

582
Tab Menu
Tab menu

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

6.4k
Social buttons
Mono-color Social buttons change colors according to your need

Author:
Arya

3 years ago

12k
Sharp corner button design
button with hover effect

Author:
Amit Pachange

2 years ago

12.5k
pasta
by salvator

Author:
Baraka Salvator

6 months ago

734
Modern page
hero page by salvator

Author:
Baraka Salvator

7 months ago

1k
Buttons!

Author:
Crimson

11 months ago

1.6k
sidebar elastico

Author:
Raul antonio de la cruz hernandez

5 months ago

416
tradition music
by salvator

Author:
Baraka Salvator

7 months ago

801
Simple Btn

Author:
Abid Ullah

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components