buttonghostbeginner

Ghost Button

A transparent button with a border that fills with color on hover.

Preview

<button class="px-6 py-3 border-2 border-indigo-600 text-indigo-600 font-semibold rounded-lg hover:bg-indigo-600 hover:text-white transition-colors duration-300">Learn More</button>

Color Breakdown

Border

border-indigo-600

#4f46e5

Text

text-indigo-600

#4f46e5

Hover Background

hover:bg-indigo-600

#4f46e5

Hover Text

hover:text-white

#ffffff

Dark Mode Variant

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

dark:border-indigo-400 dark:text-indigo-400 dark:hover:bg-indigo-400 dark:hover:text-gray-900

Use Cases

Secondary actionsCancel buttonsNavigation links

Browser Support

All modern browsers.

Related Recipes

Gradient Button

button - beginner

Pill 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 make a ghost button with rounded corners?▼

Change rounded-lg to rounded-full for a pill shape.