Generate accessible Tailwind buttons — solid, outline or ghost, in three sizes — with hover shades derived from your brand color and a visible focus ring included by default.
Settings
Generated locally in your browser — your settings and results never leave this page.
Buttons that get the details right
A production button is more than bg + padding: it needs a hover shade that relates to the base color, an active state, a visible keyboard focus ring, and smooth transitions. This generator computes all of it from one brand color — hover and active come from an OKLCH shade scale (600→700), outline and ghost variants get the matching 50-tint hover, and every variant ships with focus-visible outlines.
Worked example
<button type="button"
class="inline-flex items-center justify-center px-4 py-2 text-sm font-semibold rounded-lg
bg-indigo-600 text-white hover:bg-indigo-700
focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600
transition-colors">
Get started
</button>The three variants
- Solid — primary actions; one per view is the classic guidance.
- Outline — secondary actions beside a solid primary.
- Ghost — tertiary/toolbar actions where chrome should recede.
Accessibility, non-negotiable
- The focus ring uses focus-visible so keyboards see it and mice are not flashed; text color on solid buttons is computed black/white by real contrast. Check custom pairs in the contrast checker.
Limitations
- Disabled/loading states and icon placement are per-project decisions — the generated skeleton takes both without restructuring.
How to use the Tailwind Button Generator
- Pick variant (solid, outline, ghost), brand color, size, radius and label.
- Check the live button.
- Copy the HTML — hover shades and the focus ring are already wired.
Frequently asked questions
Where do the hover colors come from?
From an OKLCH shade scale generated off your brand color: hover uses the 600→700 step, outline/ghost hover uses the 50 tint — the convention design systems converge on, computed instead of guessed.
Why is there a focus-visible outline in every button?
Keyboard users need a visible focus indicator — removing it is the most common accessibility regression in custom buttons. focus-visible shows it for keyboard navigation without flashing on mouse clicks.
How do I make a destructive variant?
Change the brand color to your danger red — the "Danger" preset shows it. Same structure, different scale; pair with the Semantic Color Token Generator for the full role system.
