<h3 class="site-preview-heading">Accent cool color</h3>
<button type="button" class="button button--cool">Default</button>
<button type="button" class="button button--cool button--cool-hover">Hover</button>
<button type="button" class="button button--cool button--cool-active">Active</button>
<button type="button" class="button button--cool button--cool focus">Focus</button>
<button type="button" class="button button--cool" disabled="disabled">Disabled</button>
<button type="button" class="button button--cool button--cool-unstyled">Unstyled Button</button>
<h4>Navigation</h4>
<h5>Uppercase</h5>
<div class="nav-buttons">
<button type="button" class="button button--cool button--cool-nav-uppercase button--cool-nav-previous">Previous</button>
<button type="button" class="button button--cool button--cool-nav-uppercase button--cool-nav-next">Next</button>
</div>
<h5>Lowercase</h5>
<div class="nav-buttons">
<button type="button" class="button button--cool button--cool-nav button--cool-nav-previous">Previous</button>
<button type="button" class="button button--cool button--cool-nav button--cool-nav-next">Next</button>
</div>
<h4>Actions</h4>
<div class="proceed-buttons">
<button type="button" class="button button--cool button--cool-action-confirm">Confirm</button>
<button type="button" class="button button--cool button--cool-action-cancel">Cancel</button>
</div>
<h3 class="site-preview-heading">Accent cool color</h3>
<button type="button" class="button button--cool">{{defaultText}}</button>
<button type="button" class="button button--cool button--cool-hover">{{hoverText}}</button>
<button type="button" class="button button--cool button--cool-active">{{activeText}}</button>
<button type="button" class="button button--cool button--cool focus">{{focusText}}</button>
<button type="button" class="button button--cool" disabled="disabled">{{disabledText}}</button>
<button type="button" class="button button--cool button--cool-unstyled">{{unstyledText}}</button>
<h4>Navigation</h4>
<h5>Uppercase</h5>
<div class="nav-buttons">
<button type="button" class="button button--cool button--cool-nav-uppercase button--cool-nav-previous">{{previousText}}</button>
<button type="button" class="button button--cool button--cool-nav-uppercase button--cool-nav-next">{{nextText}}</button>
</div>
<h5>Lowercase</h5>
<div class="nav-buttons">
<button type="button" class="button button--cool button--cool-nav button--cool-nav-previous">{{previousText}}</button>
<button type="button" class="button button--cool button--cool-nav button--cool-nav-next">{{nextText}}</button>
</div>
<h4>Actions</h4>
<div class="proceed-buttons">
<button type="button" class="button button--cool button--cool-action-confirm">{{proceedText}}</button>
<button type="button" class="button button--cool button--cool-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"
}
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;
}
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.
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:
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.