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 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

https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari