Loading...

CSS Buttons

Buttons are the “do it” controls — send, save, next. CSS can give them a clear skin and honest feedback when someone hovers, presses, focuses, or finds them disabled. Keep the HTML semantic (button or submit input); this lesson is about the look and the states.

A button toolkit

📊 Buttons at a glance

Piece Everyday job
padding + background + border Build a solid, readable button face
border-radius Soften corners (or go pill with a large radius)
:hover / :active Show “I’m interactive” and “I’m pressed”
:focus-visible Keep a keyboard focus ring you can see
:disabled + cursor Mute unavailable buttons; hand cursor when clickable

Style one shared .btn (or button) so primary actions match across the page. Field padding for text inputs stayed in the previous lesson — here we dress the click targets.

A solid primary button

Start with comfortable padding, a clear background, readable text color, and a calm border-radius. Prefer font: inherit so the button matches nearby copy.

Base primary button

css
CSS Code 
button,
.btn {
display: inline-block;
padding: 0.65rem 1.1rem;
font: inherit;
font-weight: 600;
color: #fff;
background: #0b5fff;
border: 1px solid #0b5fff;
border-radius: 0.5rem;
cursor: pointer;
}

Hover and active — honest feedback

:hover can darken or lighten the face slightly. :active should feel pressed — a shade darker or a tiny shift — not a brand-new neon theme.

Hover and active

css
CSS Code 
button:hover,
.btn:hover {
background: #094fd6;
border-color: #094fd6;
}

button:active,
.btn:active {
background: #0844b8;
border-color: #0844b8;
}

Focus you can see

Never strip focus styles without a replacement. :focus-visible draws a clear ring for keyboard users while keeping mouse clicks calm.

Visible focus ring

css
CSS Code 
button:focus-visible,
.btn:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 3px;
}

Disabled buttons stay visible

A disabled button should look unavailable — lower opacity or muted colors — and refuse the pointer. Do not hide it from the layout.

Disabled tone

css
CSS Code 
button:disabled,
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
background: #8aa9e8;
border-color: #8aa9e8;
}

A calm button habit

Keep one primary skin, clear hover/active, a visible focus ring, and muted disabled. Outline/ghost variants can share the same padding and radius so the set feels related — not five unrelated widgets.

Outline companion

css
CSS Code 
.btn-outline {
color: #0b5fff;
background: transparent;
border: 1px solid #0b5fff;
}

.btn-outline:hover {
color: #fff;
background: #0b5fff;
}

Try it yourself

  1. Style a primary button with padding, background, text color, and border-radius.
  2. Darken :hover and deepen :active slightly.
  3. Add a :focus-visible outline — no bare outline: none.
  4. Mute a :disabled button and set cursor: not-allowed.
  5. Optional: add a .btn-outline sibling that shares padding and radius.

Common mistakes

  • outline: none with no focus replacement (keyboard users get lost)
  • Tiny padding that fails mobile tap targets
  • Turning this lesson into text-input / textarea styling (that was form-controls)
  • A wild neon theme on :hover that breaks brand calm
  • Styling only a tags and forgetting real button elements

Summary

  • Padding, background, border, and radius build a solid button face
  • :hover and :active give honest interaction feedback
  • Keep a visible :focus-visible ring
  • Mute :disabled; use cursor: pointer when clickable
  • Leave field chrome to the form-controls lesson; here dress the click targets

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 34 of 35
Css Tutorial