Buttons
Learn how to build primary, secondary, and outline button variants purely from Tailwind CSS utility classes.
Introduction
Buttons are one of the most repeated components in any interface, which makes them a perfect showcase for everything you have learned so far: colors, spacing, borders, rounded corners, and state variants. In this lesson you will build a complete set of primary, secondary, and outline button variants purely from utility classes.
- The common structural utilities every button shares.
- How to build a solid primary button.
- How to build a lighter secondary button.
- How to build an outline (ghost) button.
- How to scale buttons into small, medium, and large sizes.
Anatomy of a Button
Most buttons share a common structural foundation regardless of their color variant: horizontal and vertical padding, a font weight, rounded corners, and a transition for smooth hover changes. Variants then layer on their own background, text, and border colors on top of this shared foundation.
| Utility Group | Example Classes |
|---|---|
| Spacing | px-5 py-2.5 |
| Typography | font-semibold text-sm |
| Shape | rounded-lg |
| Transition | transition-colors duration-150 |
Primary Button
The primary button is your main call to action, so it should use your boldest, most saturated brand color, a solid background, and white text for strong contrast.
<button class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white font-semibold px-5 py-2.5 rounded-lg transition-colors"> Get Started</button>Click Run to see what this code prints.
Secondary Button
The secondary button supports a primary action without competing with it visually. A common pattern uses a light, muted background with darker text of the same color family.
<button class="bg-slate-100 hover:bg-slate-200 active:bg-slate-300 text-slate-800 font-semibold px-5 py-2.5 rounded-lg transition-colors"> Learn More</button>Click Run to see what this code prints.
Outline Button
An outline (or ghost) button has a transparent background with just a colored border and matching text, useful for lower-emphasis actions like "Cancel" that still need to be clearly clickable.
<button class="border-2 border-blue-600 text-blue-600 hover:bg-blue-50 active:bg-blue-100 font-semibold px-5 py-2 rounded-lg transition-colors"> Cancel</button>Click Run to see what this code prints.
Button Sizes
You can build small, medium, and large versions of any button variant simply by adjusting the padding and font size utilities while keeping the color classes identical.
<div class="flex items-center gap-4"> <button class="bg-blue-600 text-white text-xs px-3 py-1.5 rounded-md">Small</button> <button class="bg-blue-600 text-white text-sm px-5 py-2.5 rounded-lg">Medium</button> <button class="bg-blue-600 text-white text-base px-7 py-3.5 rounded-lg">Large</button></div>Click Run to see what this code prints.
Icon Buttons
Buttons that pair an icon with text use flex, items-center, and gap-* to align the icon and label cleanly on the same line. Icon-only buttons typically use equal padding on all sides and rounded-full for a circular shape.
<button class="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold px-5 py-2.5 rounded-lg"> <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"/></svg> Add Item</button>Click Run to see what this code prints.
Common Mistakes
- Forgetting hover: and active: states, leaving buttons feeling static and unresponsive.
- Using the same visual weight (a solid, saturated background) for every button on a page, so nothing stands out as the primary action.
- Skipping focus:ring-* on buttons, which makes them hard to use with a keyboard.
- Inconsistent padding and font-size combinations across buttons that are supposed to be the same size.
- Wrapping icons and text without items-center, leaving them misaligned vertically.
Best Practices
- Use exactly one primary button per view or section to keep the main action obvious.
- Standardize a small set of size variants (small, medium, large) and reuse them everywhere.
- Always include hover:, active:, and focus:ring-* states on interactive buttons.
- Keep spacing, radius, and font-weight consistent across all button variants so only the color changes.
- Extract repeated button class combinations into a reusable component instead of copy-pasting long class strings.
Frequently Asked Questions
Use <button> for actions that happen on the current page (like submitting a form or opening a modal), and a styled <a> for navigation to a different page or URL, even if it looks like a button.
In a component-based framework, extract the classes into a reusable Button component. In plain HTML projects, Tailwind's @apply directive lets you group utilities into a custom class like .btn-primary.
Combine disabled:opacity-50 and disabled:cursor-not-allowed with disabled:hover:bg-{same-as-base} so the hover color does not still change on a disabled button.
Key Takeaways
- Buttons share a structural foundation of padding, font weight, rounding, and transitions.
- Primary buttons use a bold, solid background for the main call to action.
- Secondary buttons use a lighter, muted background for supporting actions.
- Outline buttons use a transparent background with a colored border for lower-emphasis actions.
- Sizes are built by scaling padding and font size while keeping colors consistent.
Summary
Buttons pull together nearly everything covered in this course: color, spacing, borders, rounded corners, and interactive states. With a consistent primary, secondary, and outline pattern, you can build a cohesive button system for any project. Next, you will combine these skills to build a complete card component from scratch.