How to style a button
Short answer
Remove the default border and set a background, padding and rounding:
<style>
.btn { padding: 10px 20px; border: 0; border-radius: 8px; background: rebeccapurple; color: white; font-size: 16px; cursor: pointer; }
</style>
<button class="btn">Buy</button>Reacting to hover and press
The :hover pseudo-class changes the color, :active slightly "presses" the button, and transition makes the change smooth:
<style>
.btn { padding: 10px 20px; border: 0; border-radius: 8px; background: rebeccapurple; color: white; cursor: pointer; transition: background 0.2s, transform 0.1s; }
.btn:hover { background: indigo; }
.btn:active { transform: scale(0.96); }
</style>
<button class="btn">Click me</button>A pill button and an outline button
A large rounding such as 999px turns the button into a pill. A secondary button is made outlined — a transparent background and a border:
<style>
.btn { padding: 10px 20px; border: 2px solid rebeccapurple; border-radius: 999px; cursor: pointer; }
.primary { background: rebeccapurple; color: white; }
.ghost { background: transparent; color: rebeccapurple; }
</style>
<button class="btn primary">Save</button>
<button class="btn ghost">Cancel</button>Common mistake
The focus ring is removed from the button with outline: none for looks. A person using the keyboard no longer sees where they are. If you dislike the default ring, replace it with your own via :focus-visible instead of deleting it.
Functions used in this recipe
- <button> — A button: submits a form or triggers an action.
- border-radius — Rounds the corners of an element.
- padding — The inner spacing between the content and the border of an element.
- :hover — Matches an element while the mouse pointer is over it.
- :active — Matches an element while it is being pressed — between pressing and releasing the mouse button.