Button: Outline Inverse

Draft

HTML
View
Context
Assets
Info
Notes


        
        <h3 class="site-preview-heading">Outline inverse</h3>
<div class="button--inverse-background">
    <button type="button" class="button button--outline-inverse">Default</button>
    <button type="button" class="button button--outline-inverse button--outline-inverse-hover">Hover</button>
    <button type="button" class="button button--outline-inverse button--outline-inverse-active">Active</button>
    <button type="button" class="button button--outline-inverse button--outline-inverse-focus focus">Focus</button>
    <button type="button" class="button button--outline-inverse button--outline-inverse" disabled="disabled">Disabled</button>
    <button type="button" class="button button--outline-inverse button--outline-inverse-unstyled">Unstyled Button</button>
</div>

<h4>Navigation</h4>

<h5>Uppercase</h5>

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

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

<h4>Actions</h4>

<div class="proceeduttons">
    <button type="button" class="button button--outline-inverse-action-confirm">Confirm</button>
    <button type="button" class="button button--outline-inverse-action-cancel">Cancel</button>
</div>


        <h3 class="site-preview-heading">Outline inverse</h3>
<div class="button--inverse-background">
  <button type="button" class="button button--outline-inverse">{{defaultText}}</button>
  <button type="button" class="button button--outline-inverse button--outline-inverse-hover">{{hoverText}}</button>
  <button type="button" class="button button--outline-inverse button--outline-inverse-active">{{activeText}}</button>
  <button type="button" class="button button--outline-inverse button--outline-inverse-focus focus">{{focusText}}</button>
  <button type="button" class="button button--outline-inverse button--outline-inverse" disabled="disabled">{{disabledText}}</button>
  <button type="button" class="button button--outline-inverse button--outline-inverse-unstyled">{{unstyledText}}</button>
</div>

<h4>Navigation</h4>

<h5>Uppercase</h5>

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

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

<h4>Actions</h4>

<div class="proceeduttons">
  <button type="button" class="button button--outline-inverse-action-confirm">{{proceedText}}</button>
  <button type="button" class="button button--outline-inverse-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"
}

File:

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

Handle: @button--outline-inverse
Variants (6): Default , Outline , Outline Inverse , Cool , Warm , Big
Preview:
- With layout
- Component only
Filesystem Path: src/components/01-atoms/02-button/02-button--outline-inverse.hbs

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.