Button styles

Learn to style the button element.

Style the button tag

The <button> tag is the form's submit control. The browser draws it as a pale gray box; that rarely fits a real design.

To style it, set padding, background, color, border and border-radius. Example: .submit { background: #2563eb; color: white; padding: 10px 20px; border: none; border-radius: 6px; }. The button now reads well and invites a click.

:hover and :active

When you hover or click a button, its state changes. CSS catches this with two pseudo-classes: :hover while the mouse is over, :active during the click.

A common pattern: darken the background a tone on hover, another tone on active. The button feels alive. With a transition it moves smoothly: transition: background 0.2s;.

Cursor and transition

Two small details improve a button a lot. First, cursor: pointer;: the mouse turns into a hand over the button; it reads as clickable.

Second, transition: smooths the move between hover and active. Instead of a sudden color flip, a 0.2s glide feels natural. Together, they make the button actually behave like a button.

Exercise Build a submit button

Inside a .submit selector, write: background: #2563eb;, color: white;, padding: 10px 20px;, border: none;, cursor: pointer;. Also add background: #1d4ed8; inside .submit:hover.

Show example solution

open .submit, write five declarations; then add a darker blue for .submit:hover.
Example solution:
.submit {
  background: #2563eb;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
.submit:hover {
  background: #1d4ed8;
}

Test yourself

Which fires on mouse over?
- button.hover { ... }
- button::hover { ... }
- button:hovers { ... }
- button:hover { ... }
Show answer

button:hover { ... } — Correct! :hover is a pseudo-class that fires on mouse over.

A darker color for button:hover

button:hover {
  background: ____;
}

Show answer

button:hover {
  background: #1d4ed8;
}

Match button states

button

tag
button:hover

mouse over
button:active

clicked
cursor: pointer

hand cursor

Next lesson: Checkbox and radio

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies