Skip to content

109 Sandbox

A website made for testing

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

WordPress plugin: Opening Hours

Published ·UPD ·In Testing, WordPress

[op-overview set_id="8745" highlight="day"]

This is test paragraph.

Hugo and Jekyll themes

Published ·UPD ·In CSS

Visual Studio Code keyboard shortcuts

Published ·UPD ·In Software

A not exhaustive list of keyboard shortcuts for Visual Studio Code (VSCode).

Shortcut Command
Alt + Down Move line down
Alt + Up Move line up
Alt + Z Toggle word wrap
Ctrl + B Toggle Sidebar
Ctrl + U Undo last cursor operation
Ctrl + Shift + [ Fold (collapse) region
Ctrl + Shift + [ Unfold (expand) region
Ctrl + Shift + E Show Explorer / Toggle focus
Ctrl + Shift + F Show Search
Ctrl + Shift + F Delete line
Ctrl + Shift + X Show Extensions
Shift + Alt + Down Copy/duplicate line down
Shift + Alt + Up Copy/duplicate line up

Official documentation: code.visualstudio.com/docs/getstarted/keybindings

WordPress plugins

Published ·UPD ·In Miscellaneous

This is a list of WordPress plugins that I use often and that I have grown to trust. The list is a work in progress.