buttongradientbeginner

Gradient Button

A vibrant gradient button with hover scale effect and smooth transitions.

Preview

<button class="px-8 py-3 bg-gradient-to-r from-purple-600 to-pink-500 text-white font-semibold rounded-lg shadow-lg hover:scale-105 hover:shadow-xl transition-all duration-300">Get Started</button>

Color Breakdown

Gradient Start

from-purple-600

#9333ea

Gradient End

to-pink-500

#ec4899

Text

text-white

#ffffff

Dark Mode Variant

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

dark:from-purple-500 dark:to-pink-400

Use Cases

Call-to-action buttonsSign-up formsLanding page CTAs

Browser Support

All modern browsers. Gradients supported in Chrome 26+, Firefox 16+, Safari 7+, Edge 12+.

Related Recipes

Ghost 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 change the gradient colors?▼

Replace from-purple-600 and to-pink-500 with any Tailwind color classes, e.g. from-blue-500 to-cyan-400.

Can I add a three-color gradient?▼

Yes, add a via-{color} class between from and to, e.g. from-purple-600 via-pink-500 to-red-400.