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