Button Generator
Pick colors, spacing, radius, border and shadow on a live button. You get the Tailwind classes, plus HTML and JSX, with a matching hover state.
inline-flex items-center justify-center rounded-lg px-5 py-2.5 text-sm font-medium bg-cyan-700 text-white hover:bg-cyan-800 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2
<button class="inline-flex items-center justify-center rounded-lg px-5 py-2.5 text-sm font-medium bg-cyan-700 text-white hover:bg-cyan-800 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2">Get started</button>
<button className="inline-flex items-center justify-center rounded-lg px-5 py-2.5 text-sm font-medium bg-cyan-700 text-white hover:bg-cyan-800 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2">Get started</button>
Frequently asked questions
How do I style a button with Tailwind CSS?
Combine padding, color, radius and font utilities, for example px-5 py-2.5 rounded-lg bg-cyan-700 text-white font-medium. Add hover:bg-cyan-800 and transition-colors so it responds to the pointer.
How does the hover color get chosen?
If your color is close to a Tailwind palette color, the hover state uses the next darker shade, such as cyan-700 to cyan-800. For custom colors it darkens the color slightly and outputs an arbitrary value.
How do I make a pill-shaped button?
Use rounded-full. Small corner radii like rounded-md suit dense interfaces, while rounded-lg and rounded-xl feel friendlier.
What makes a button accessible?
Enough contrast between text and background (check it with the contrast checker), a visible focus style, and a touch target of about 40px or more. The generated classes include a focus-visible outline.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.