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

604

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

Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

Author:
KULDEEP

8 months ago

953
Linkedin login/signup button

Author:
Shakti

3 years ago

13.4k
Gold Premium Button
🪙 Glowing Premium BIP Gold Button in pue Tailwind CSS

Author:
Arnav K

2 years ago

5.6k
Interactive "Morphing" Play/Pause Button

Author:
Anonymous

1 year ago

1.9k
Simple Pagination

Author:
Manuela Bianka

3 years ago

12.1k
Plug and Play Button - Animated gradient background
Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

1 year ago

1.9k
Neon Morphism button

Author:
Akram Khan

1 year ago

2.1k
Image Card
An image. Shows title and description info when hovering. Image zooms and darkens when hovering.

Author:
Nick Girga

10 months ago

834
Download on the App Store light button

Author:
Simon Scheffer

2 years ago

13.2k
Sign up with google button

Author:
Laurits

3 years ago

42k
Buttons examples

Author:
Manuela Bianka

3 years ago

12.5k
Boutons iOS 26
Boutons iOS 26

Author:
Omer fils ELENGA

3 months ago

434

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components