buttonpillbeginner

Pill Button

A fully rounded pill-shaped button with a solid background and shadow.

Preview

<button class="px-8 py-3 bg-emerald-500 text-white font-semibold rounded-full shadow-md hover:bg-emerald-600 hover:shadow-lg transition-all duration-300">Subscribe</button>

Color Breakdown

Background

bg-emerald-500

#10b981

Hover Background

hover:bg-emerald-600

#059669

Text

text-white

#ffffff

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-emerald-600 dark:hover:bg-emerald-500

Use Cases

Subscribe buttonsTag filtersApp store buttons

Browser Support

All modern browsers.

Related Recipes

Gradient Button

button - beginner

Ghost Button

button - beginner

Icon Button

button - beginner

Loading Button

button - intermediate

Outline Button

button - beginner

Split Button

button - intermediate

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I increase the pill button size?▼

Increase padding with px-10 py-4 and font size with text-lg.