CSS Buttons

A native browser button looks dated the moment your design has any personality. Turning a plain button or anchor tag into something that matches your site takes just a handful of properties.

In this page:

Basic Button Styling
Hover and Active States
Focus State for Keyboard Users
Disabled Button Styling
Button Size and Shape Variants

Basic Button Styling

Styling a button starts with removing the browser default appearance (border, background) and applying your own padding, background-color, and border-radius. Setting cursor: pointer explicitly is good practice even though buttons already show a pointer cursor by default, since it becomes necessary the moment you style a link as a button instead.

Example: Basic Button Styling

css

<style>
button {
  border: none;
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
}
</style>
<button>Click Me</button>

Hover and Active States

A button needs visible feedback for the states a user actually interacts with: :hover for mouse-over (usually a slightly darker or lighter background) and :active for the moment it is being clicked (often a slightly darker shade still, or a small scale-down transform to simulate a physical press).

Example: Hover and Active States

css

<style>
button {
  background: royalblue;
  color: white;
  border: none;
  padding: 10px 20px;
}
button:hover {
  background: #3b5fd6;
}
button:active {
  background: #2a49b0;
  transform: scale(0.98);
}
</style>
<button>Press Me</button>

Focus State for Keyboard Users

A visible :focus (or :focus-visible) outline is essential for keyboard users tabbing through a page — removing it entirely with outline: none without providing a replacement is a common accessibility failure. A custom focus ring using box-shadow or a styled outline keeps buttons both good-looking and accessible.

Example: Focus State for Keyboard Users

css

<style>
button:focus-visible {
  outline: 3px solid orange;
  outline-offset: 2px;
}
</style>
<button>Tab to me</button>

Disabled Button Styling

The disabled attribute already prevents clicks and changes the cursor to not-allowed in most browsers by default, but a disabled button should also look visually distinct, typically with reduced opacity and a muted color, so users understand at a glance that it cannot be interacted with.

Example: Disabled Button Styling

css

<style>
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
<button disabled>Unavailable</button>

Button Size and Shape Variants

Real interfaces usually need several button variants: a primary filled button, a secondary outlined button (transparent background, colored border), and size variants (small/large) controlled by adjusting padding and font-size together so the button scales proportionally.

Example: Button Size and Shape Variants

css

<style>
.primary { background: royalblue; color: white; padding: 10px 20px; border: none; }
.secondary { background: transparent; border: 2px solid royalblue; color: royalblue; padding: 10px 20px; }
.small { font-size: 12px; padding: 4px 10px; }
</style>
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="primary small">Small</button>

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Image Shapes Next Lesson → CSS Columns