<h3 class="site-preview-heading">Accent warm color</h3>
<button type="button" class="button button--warm">Default</button>
<button type="button" class="button button--warm button--warm-hover">Hover</button>
<button type="button" class="button button--warm button--warm-active">Active</button>
<button type="button" class="button button--warm button--warm focus">Focus</button>
<button type="button" class="button button--warm-disabled" disabled="disabled">Disabled</button>
<button type="button" class="button button--warm button--warm-unstyled">Unstyled Button</button>

<h4>Navigation</h4>

<h5>Uppercase</h5>

<div class="nav-buttons">
    <button type="button" class="button button--warm button--warm-nav-uppercase button--nav-previous">Previous</button>
    <button type="button" class="button button--warm button--warm-nav-uppercase button--nav-next">Next</button>
</div>

<h5>Lowercase</h5>
<div class="nav-buttons">
    <button type="button" class="button button--nav button--warm button--warm-nav-previous">Previous</button>
    <button type="button" class="button button--nav button--warm button--warm--next">Next</button>
</div>

<h4>Actions</h4>

<div class="proceed-buttons">
    <button type="button" class="button button--warm button--warm-action-confirm">Confirm</button>
    <button type="button" class="button button--warm button--warm-action-cancel">Cancel</button>
</div>
<h3 class="site-preview-heading">Accent warm color</h3>
<button type="button" class="button button--warm">{{defaultText}}</button>
<button type="button" class="button button--warm button--warm-hover">{{hoverText}}</button>
<button type="button" class="button button--warm button--warm-active">{{activeText}}</button>
<button type="button" class="button button--warm button--warm focus">{{focusText}}</button>
<button type="button" class="button button--warm-disabled" disabled="disabled">{{disabledText}}</button>
<button type="button" class="button button--warm button--warm-unstyled">{{unstyledText}}</button>


<h4>Navigation</h4>

<h5>Uppercase</h5>

<div class="nav-buttons">
  <button type="button" class="button button--warm button--warm-nav-uppercase button--nav-previous">{{previousText}}</button>
  <button type="button" class="button button--warm button--warm-nav-uppercase button--nav-next">{{nextText}}</button>
</div>

<h5>Lowercase</h5>
<div class="nav-buttons">
  <button type="button" class="button button--nav button--warm button--warm-nav-previous">{{previousText}}</button>
  <button type="button" class="button button--nav button--warm button--warm--next">{{nextText}}</button>
</div>

<h4>Actions</h4>

<div class="proceed-buttons">
  <button type="button" class="button button--warm button--warm-action-confirm">{{proceedText}}</button>
  <button type="button" class="button button--warm button--warm-action-cancel">{{cancelText}}</button>
</div>
{
  "defaultText": "Default",
  "hoverText": "Hover",
  "activeText": "Active",
  "focusText": "Focus",
  "disabledText": "Disabled",
  "unstyledText": "Unstyled Button",
  "bigText": "Big Button",
  "previousText": "Previous",
  "nextText": "Next",
  "proceedText": "Confirm",
  "cancelText": "Cancel"
}
  • Content:
    button {
      background: var(--oklch-color-white);
      color: var(--oklch-color-cerulean);
      height: 3rem;
      width: 10rem;
      margin-inline: 10px;
    }
    
    button:focus,
    .button--focus:focus {
      outline: 2px solid var(--oklch-color-cherry);
    }
    
    .button--hover:hover,
    .button--outline-inverse-hover:hover {
      color: var(--oklch-color-white);
      background-color: var(--oklch-color-cerulean);
    
    }
    
    .button--unstyled,
    .button--unstyled {
      border: 0;
      background: initial;
    }
    
    button:active,
    .button--active:active {
      box-shadow: 4px 4px 10px var(--oklch-color-charcoal);
    }
    
    .button--nav-uppercase {
      text-transform: uppercase;
    }
    
    .button--nav-uppercase-previous::before,
    .button--nav-previous::before {
      content: '\2190  '
    }
    
    .button--nav-uppercase-next::after,
    .button--nav-next::after {
      content: '  \2192'
    }
    
    .button--action-confirm {
      color: var(--oklch-color-charcoal);
      background: color-mix(in lab, var(--oklch-color-green) 10%, white)
    }
    
    .button--action-cancel {
      color: var(--oklch-color-charcoal);
      background: color-mix(in lab, var(--oklch-color-red) 10%, white)
    }
    
    /*
    Outline Styles
    */
    
    .button--outline {
      background: var(--oklch-color-white);
      color: var(--oklch-color-charcoal);
    }
    
    .button--outline:hover,
    .button--outline-hover:hover {
      color: var(--oklch-color-white);
      background: var(--oklch-color-dove);
    }
    
    .button--outline-unstyled {
      border: initial;
      color: var(--oklch-color-charcoal);
    }
    
    .button--outline-hover,
    .button--outline-active {
      color: var(--oklch-color-charcoal);
    }
    
    /*
    Inverse Outline
    */
    
    .button--outline-inverse {
      color: var(--oklch-color-white);
      background: var(--oklch-color-charcoal);
    }
    
    .button--outline-inverse:hover,
    .button--outline-inverse-hover:hover {
      background: var(--oklch-color-dove);
    }
    
    .button--outline-inverse-hover,
    .button--outline-inverse-active {
      color: var(--oklch-color-charcoal);
    }
    
    .button--outline-inverse {
      background: var(--oklch-color-charcoal);
      color: var(--oklch-color-white);
    }
    
    button[disabled],
    .button--outline-inverse-disabled {
      
    }
    
    .button--outline-inverse-unstyled {
      border: initial;
      background: transparent;
      color: var(--oklch-color-charcoal);
    }
    
    .button--outline-inverse-action-confirm {
      color: var(--oklch-color-charcoal);
      background: color-mix(in lab, var(--oklch-color-green) 10%, white)
    }
    
    .button--outline-inverse-action-cancel {
      color: var(--oklch-color-charcoal);
      background: color-mix(in lab, var(--oklch-color-red) 10%, white)
    }
    
    .button--outline-inverse:focus,
    .button--outline-inverse-focus:focus {
      outline: 2px solid var(--oklch-color-hemi-orange);
    }
    
    /*
    Cool palette
    
    lapis
    */
    
    .button--cool {
      background: var(--oklch-color-lapis);
      color: var(--oklch-color-white);
      height: 3rem;
      width: 10rem;
    }
    
    .button--cool:focus,
    .button--cool-focus:focus {
      outline: 2px solid var(--oklch-color-cherry);
      outline-offset: 2px;
    }
    
    .button--cool:hover,
    .button--cool-hover:hover {
      color: var(--oklch-color-white);
      background-color: var(--oklch-color-admiral);
    
    }
    
    .button--cool-unstyled {
      border: 0;
      color: var(--oklch-color-lapis);
      background: initial;
    }
    
    .button--cool-active:active {
      box-shadow: 4px 4px 10px var(--oklch-color-dove);
    }
    
    .button--cool-nav-uppercase {
      text-transform: uppercase;
    }
    
    .button--cool-nav-uppercase-previous::before,
    .button--cool-nav-previous::before {
      content: '\2190  '
    }
    
    .button--cool-nav-uppercase-next::after,
    .button--cool-nav-next::after {
      content: '  \2192'
    }
    
    .button--cool-action-confirm {
      color: var(--oklch-color-white);
      background: var(--oklch-color-lapis)
    }
    
    .button--cool-action-cancel {
      color: var(--oklch-color-white);
      background: var(--oklch-color-candy)
    }
    
    .button--cool-action-cancel:hover {
      color: var(--oklch-color-white);
      background: var(--oklch-color-lipstick)
    }
    
    /*
    warm palette
    
    crimson
    */
    
    .button--warm {
      background: var(--oklch-color-crimson);
      color: var(--oklch-color-white);
      height: 3rem;
      width: 10rem;
    }
    
    .button--warm:focus,
    .button--warm-focus:focus {
      outline: 2px solid var(--oklch-color-cherry);
      outline-offset: 2px;
    }
    
    .button--warm:hover,
    .button--warm-hover:hover {
      color: var(--oklch-color-white);
      background-color: var(--oklch-color-ruby);
    
    }
    
    .button--warm-unstyled {
      border: 0;
      color: var(--oklch-color-crimson);
      background: initial;
    }
    
    .button--warm-disabled {
      color: var(--oklch-color-crimson);
    }
    
    .button--warm-active:active {
      box-shadow: 4px 4px 10px var(--oklch-color-dove);
    }
    
    .button--warm-nav-uppercase {
      text-transform: uppercase;
    }
    
    .button--warm-nav-uppercase-previous::before,
    .button--warm-nav-previous::before {
      content: '\2190  '
    }
    
    .button--warm-nav-uppercase-next::after,
    .button--warm-nav-next::after {
      content: '  \2192'
    }
    
    .button--warm-action-confirm {
      color: var(--oklch-color-white);
      background: var(--oklch-color-crimson)
    }
    
    .button--warm-action-cancel {
      color: var(--oklch-color-white);
      background: var(--oklch-color-candy)
    }
    
    .button--warm-action-cancel:hover {
      color: var(--oklch-color-white);
      background: var(--oklch-color-lipstick)
    }
    
    /*
    Big buttons
    */
    
    .button--big {
      background: var(--oklch-color-white);
      color: var(--oklch-color-charcoal);
      height: 10rem;
      width: 15rem;
      margin-block-end: 4rem;
      margin-inline: 4rem;
    }
    
    .button--big:focus {
      outline: 4px solid var(--oklch-color-cherry);
      outline-offset: 4px;
    }
    .button--big-unstyled {
      border: 0;
      color: var(--oklch-color-charcoal);
      background: initial;
    }
    
    .button--big-nav-uppercase {
      text-transform: uppercase;
    }
    
    .button--big-nav-uppercase-previous::before,
    .button--big-nav-previous::before {
      content: '\2190  '
    }
    
    .button--big-nav-uppercase-next::after,
    .button--big-nav-next::after {
      content: '  \2192'
    }
    
    .button--big-cta {
      height: 6rem;
      width: 20rem;
    }
  • URL: /components/raw/button/button.css
  • Filesystem Path: src/components/01-atoms/02-button/button.css
  • Size: 5.7 KB

Buttons

Starting to work on button sets to go along other styles for my projects.

There are a lot of issues left to work through on these button sets.

  • They have to match the color palette I finally choose for the site
  • They have to be accessible for people with color blindness and other color-related disabilities

Copy for buttons

When writing copy for buttons, make sure that you keep consistency. Here are a few guidelines I like to set in place at the beginning of a project:

  • Chose amount of words: One, or two, or more words per button
  • Choose case: Sentence case, or upper case, or title case, or lower case
  • Label structure: e.g. ‘verb’ + ‘noun’, or ‘verb’, or ‘verb’ + a + ‘noun’, etc.

I recently read 5 Rules for Choosing the Right Words on Button Labels by UX Movement (Paywall). Check it out to learn more about button labelling.