Home
Htmlwind
Buttons - Htmlwind

Buttons - Htmlwind

Primary buttons

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

Button

Author Htmlwind

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

🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Author:
Ahita Bisma Adlula

5 months ago

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

Author:
Akram Khan

9 months ago

904
Simple Btn

Author:
Abid Ullah

11 months ago

1.4k
Glowing gradient button
Button on black background

Author:
Özgür Atmaca

2 months ago

140
Floating feedback button

Author:
Livia Flores

2 years ago

12.3k
future ai robot
this an ai template by salvator

Author:
Baraka Salvator

2 months ago

400
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

Author:
Banshee

4 months ago

372
Call to action buttons
Pair of active primary and secondary buttons. Elevated buttons w/ border bottom

Author:
Hyun-woo Cho

1 year ago

9k
Button Dropdown
Drop down button with only tailwind css using focus

Author:
Shivam Vishwakarma

8 months ago

1.6k
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Author:
sachin senal

6 months ago

936
Button Group

Author:
Prem..

3 years ago

9.3k
button animation
button animation big

Author:
QQ-VVN

2 months ago

192

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components