CSS Buttons
Buttons get more CSS love than almost any other component. A solid button style covers default, hover, focus, active, disabled — and looks good doing it.
A complete primary button
CSS
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
font: inherit;
font-weight: 600;
background: #04AA6D;
color: #fff;
border: 0;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.btn:hover { background: #038F5C; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgb(4 170 109 / 0.3);
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
Variants with modifier classes
| Class | Tweak |
|---|---|
.btn--ghost | Transparent background, coloured border & text. |
.btn--sm / .btn--lg | Reduce or grow padding and font size. |
.btn--block | display: flex; width: 100% — full-width form button. |
.btn--danger | Red palette for destructive actions. |
Tip: Use
<button> (not a styled <div>) so keyboard, screen readers, and forms all work out of the box. Then style it.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Buttons</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Visually depress the button when active.
.btn:active { transform: translateY(
); }
A tiny downward nudge.
Discussion
Loading…