Btn

Base structural styles, resets, and colors for buttons are set with this module. All buttons share common padding and height, well suited for tap targets on touchscreen displays, and align with form inputs and selects.

Use the .btn class to style buttons, input buttons, and links.

Link Button

<div class="mb1">
  <button class="btn">Button</button>
  <a href="#!" class="btn">Link Button</a>
  <input type="button" class="btn" value="Input Button">
</div>

Note: adjusting the line-height and padding variables may require adjustments to form element variables to maintain vertical alignment.

By default elements with the .btn class have transparent backgrounds. Use color utilities or .btn color styles to adjust the appearance.

CSS Source

.btn {
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  line-height: var(--button-line-height);
  padding: var(--button-padding-y) var(--button-padding-x);
  margin: 0;
  height: auto;
  border: var(--border-width) solid transparent;
  vertical-align: middle;
  -webkit-appearance: none;
  color: inherit;
  background-color: transparent;
}

.btn:hover {
  text-decoration: none;
}

.btn:focus {
  outline: none;
  border-color: var(--darken-2);
  box-shadow: 0 0 0 3px var(--darken-3);
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

7 Rules

7 Selectors

82 Declarations

71 Properties

Color Tables

Btn Primary