How to reset and style HTML buttons
Resetting and restyling HTML buttons without a CSS framework...
Checklist
- color
- background-color
- cursor for disabled buttons
- font-size
- font-family
- line-height
- margin
- min-height and min-width
Reset
button {
box-sizing: border-box;
margin: 0;
line-height: inherit;
color: inherit;
font-family: inherit;
font-size: inherit;
}
line-height may need attention if there are buttons with multiple lines of text. All other spacing can be controlled with the button height and the button padding.
NEXT. Prevent accidental selection of the button text on touch devices:
button {
user-select: none;
}
[....] (true for Firefox xx.xx, Google Chrome xx.xx and Safari 14.0 as of November 2020). [....]
button {
display: inline-flex;
}
Vertical and horizontal alignment within the flex box:
button {
align-items: center;
justify-content: center;
}
Set a border. The border color can later be changed for the different states of solid buttons or it can be set to currentColor
for outlined buttons.
button {
border: 2px solid transparent;
}
Dimensions
Set minimum size. WCAG 2.1 recommendation. Google recommendation.
button {
min-width: 44px;
min-height: 44px;
}
Disabled buttons
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
Interactive states (hover and active)
Put together
button {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
min-width: 44px;
min-height: 44px;
border: 2px solid transparent;
background-color: #080;
padding: 0.25em 1.25em;
line-height: inherit;
color: #fff;
font-family: inherit;
font-size: inherit;
user-select: none;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
button:hover {
background-color: #060;
}
button:active {
background-color: #090;
}
button:focus {
}
Notes
:active
does not seem to happen when hitting Enter.
Browser compatibility
- Safari 10 and earlier does not support
flex
orinline-flex
on buttons. - Alternative to flex for Safari 10 and earlier:
text-align: center
andvertical-align: center
.
Resources
- Adrian Roselli - Target Size and 2.5.5
- MDN - CSS - Properties - appearance
- MDN - CSS - Properties - cursor
- MDN - CSS - Properties - user-select
- MDN - CSS - Pseudo-classes - :active
- MDN - HTML - Elements - button
- WCAG 2.1 - Understanding target size
- Florens Verschelde - Styling buttons, the right way
- Modern CSS Solutions - CSS button styling guide
- minireset.css
Resources: Working
- https://bugs.webkit.org/show_bug.cgi?id=169700
- https://css-tricks.com/overriding-default-button-styles/
- https://css-tricks.com/snippets/sass/luminance-color-function/
- https://design-system.service.gov.uk/get-started/focus-states/
- https://designsystem.digital.gov/components/button/
- https://fvsch.com/styling-buttons
- https://github.com/alphagov/govuk-design-system
- https://github.com/alphagov/govuk-frontend/blob/master/src/govuk/components/button/_index.scss
- https://github.com/csstools/sanitize.css/blob/master/sanitize.css
- https://github.com/necolas/normalize.css/blob/master/normalize.css
- https://github.com/necolas/normalize.css/commit/170455d6f6850d3b5eefdaab7b36c8c327ca8678 – Removes
cursor: pointer
- https://github.com/necolas/normalize.css/issues/566/?why-is-webkit-appearance-button-used
- https://github.com/sindresorhus/modern-normalize/blob/master/modern-normalize.css
- https://github.com/sindresorhus/modern-normalize
- https://moderncss.dev/css-button-styling-guide/
- https://stackoverflow.com/questions/1677990/what-is-the-difference-between-focus-and-active
- https://tailwindcss.com/docs/pseudo-class-variants
- https://xd.adobe.com/ideas/process/ui-design/designing-interactive-buttons-states/
- https://zellwk.com/blog/style-hover-focus-active-states/ – GOOD