Control Colour theme
Control Font family

Buttons

A button is a clickable HTML element used to perform an action.

Buttons should:

  • Have clear hover and focus states
  • Be defined by the content on the button

Buttons should not:

  • Have a hand cursor
  • Link to another page or section of a page, for this use an anchor tag

Code

Use the tabs to view the buttons source code.

Use left and right arrows to navigate between tabs.

HTML

        
        
  <button class="button button--primary" type="button" value="Button">Button</button>

<button class="button button--submit" type="submit" value="Submit">Submit</button>

<button class="button button--reset" type="reset" value="Reset">Reset</button>

<button class="button button--disabled" type="button" value="Button" disabled>Disabled</button>

<button class="button button--right" type="button" value="Button">Right</button>

      

CSS


  /*
  Buttons
  ----------------------------------- */

button,
.button {
  display: inline-block;
  padding: .5em 1em;
  border-radius: .2em;
  color: var(--colour-white);
  font-weight: bold;
  box-shadow: 0;
  transition: all 0.3s ease-in-out;
  background: var(--colour-dark);
}

button:hover,
.button:hover {
  background: var(--colour-bright);
  text-decoration: underline;
  border-radius: .8em;
}

button[disabled="disabled"],
button[disabled],
.button[disabled="disabled"],
.button[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

button[disabled="disabled"]:hover,
button[disabled]:hover,
.button[disabled="disabled"]:hover,
.button[disabled]:hover {
  border-radius: .0;
  text-decoration: none;
  background: var(--colour-medium);
}

button:active,
button:visited,
.button:active,
.button:visited {
  opacity: 0.74;
}

.button--primary {
  background: var(--colour-dark);
  color: var(--colour-white);
}

.button--secondary {
  background: var(--colour-medium);
  color: var(--colour-white);
}

.button--submit {
  background: var(--colour-bright);
  color: var(--colour-dark);
}

.button--submit:hover {
  background: var(--colour-dark);
  color: var(--colour-white);
}

.button--right {
  float: right;
}


      

Back to all components