Buttons - Htmlwind

Primary buttons

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind v3.4. It is responsive.

Button

Author Htmlwind

Tailwind v3.4 1.1k 3

Fork Fullscreen

<div class="bg-white py-8">
  <div class="mx-auto max-w-3xl px-4 flex flex-col items-center gap-y-4 sm:flex-row sm:items-center sm:justify-around">
    
    <button type="button" class="rounded-md bg-pink-500 px-4 py-3 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
    
    <button type="button" class="rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
    
    <button type="button" class="rounded-md bg-pink-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
    
    <button type="button" class="rounded-md bg-pink-500 px-2.5 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
    
    <button type="button" class="rounded-md bg-pink-500 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
  </div>
</div>

Related Examples

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

Ameth Galarcio

2 years ago

3.4k
Primary secondary button pair

Iris Callahan

1 year ago

2.1k
Gradient shadow button

Manon Daniel

3 years ago

18.2k
Canlı Yayın Butonu
Pulse efekt içeren canlı yayın butonu.

Sedat Kumcu

1 year ago

2.4k
sidebar elastico

Raul antonio de la cruz hernandez

1 year ago

940
Button Group

Prem..

4 years ago

10.5k
Custom Carosel

Md. Tofayel islam

2 years ago

3.8k
Google login/signup button
Styled button designed for users to log in or authenticate using their Google account. The button features a Google logo (represented by an SVG image) on the left and the text "Login with Google" on the right.

Shakti

3 years ago

41.6k
Simple Pagination

Manuela Bianka

4 years ago

12.6k
Playstore Button
Download on the play store button

Arya

4 years ago

15.7k
Github star button

Simon Scheffer

3 years ago

11.6k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Abdul Baset Bappy

1 year ago

1.5k