buttonoutlinebeginner

Outline Button

A clean outline button with a colored border and text that fills on hover.

Preview

<button class="px-6 py-2.5 border border-rose-500 text-rose-500 font-medium rounded-md hover:bg-rose-500 hover:text-white transition-all duration-200">Delete</button>

Color Breakdown

Border

border-rose-500

#f43f5e

Text

text-rose-500

#f43f5e

Hover Background

hover:bg-rose-500

#f43f5e

Hover Text

hover:text-white

#ffffff

Dark Mode Variant

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

dark:border-rose-400 dark:text-rose-400 dark:hover:bg-rose-400

Use Cases

Destructive actionsSecondary buttonsForm resets

Browser Support

All modern browsers.

Related Recipes

Gradient Button

button - beginner

Ghost Button

button - beginner

Pill Button

button - beginner

Icon Button

button - beginner

Loading Button

button - intermediate

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 make the border thicker?▼

Replace border with border-2 for a 2px border.