button

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

Button

Author Raul antonio de la cruz hernandez

Tailwind v3.4 1k 1

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

Background gradient changing button
Automatic and continuously gradient-changing button. Cyclic color changing button.

Ingrid Schulz

3 years ago

11.8k
Button with a gradient border using Tailwind CSS

Dipti narayan

3 years ago

13.8k
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Hamza Atig

1 year ago

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

Arya

4 years ago

12.4k
Animated Button
on hover show icon

Lautaro Gómez

2 years ago

3.3k
Button
Material Button

Akram Khan

2 years ago

3k
gradient button

Akram Khan

2 years ago

2.8k
Hamburger menu button with open/close animation
Open and close animation onclick requires alpineJs

Krishna Gudpalle

4 years ago

21.2k
Lots of button examples
tailwind button examples

QQ-VVN

1 year ago

1.3k
Neomorphism button

Akram Khan

2 years ago

3.3k
Buttons in pair

Bunny

3 years ago

12.7k
Continue with Discord button
Login with the Discord button for social login

Anonymous

3 years ago

13.8k