Skip to content

109 Sandbox

A website made for testing
CSS HTML

How to reset and style HTML buttons

Published ·UPD ·In 10up, Android, Miscellaneous

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 or inline-flex on buttons.
  • Alternative to flex for Safari 10 and earlier: text-align: center and vertical-align: center.

Resources

Resources: Working

Resources: :active