Buttons

Buttons should:

have a large click area
use text not icons
have sufficient contrast with the page background
have sufficient contrast between button colour and text
have a solid border bottom
have a clear colour change for the hover state
have a clear colour change for the active state

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.

HTML
CSS

HTML

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

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

  <button class="button button--tertiary" 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 {
    padding: .7rem .5rem;
    color: var(--colour-black);
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    background: var(--colour-pink-light);
    border: solid 1px var(--colour-pink-light);
    /* box-shadow: inset 0 0 0 2px var(--colour-white); */
    margin-right: .5em;
    height: 100%;
  }
  
  button:hover,
  .button:hover,
  button:focus,
  .button:focus {
    text-decoration: underline;
    background: var(--colour-white);
    /* box-shadow: inset 0 0 0 2px var(--colour-pink); */
  }
  
  button:active,
  .button:active {
    background: var(--colour-pink);
  }
  
  button:visited,
  .button:visited {
    background: var(--colour-pink);
  }

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

  button[disabled="disabled"]:hover,
  button[disabled]:hover {
    text-decoration: none;
  }

  .button--right {
    float: right;
  } 


.button--secondary {
    background: var(--colour-grey);
    border-color: var(--colour-black);
  }

.button--tertiary {
  background: var(--colour-grey-light);
  border-color: var(--colour-grey);
}

Back to all components