turretcss

Button Colors

Shades

Disabled

HTML

<button class="button button-white">...</button>
<button class="button button-light">...</button>
<button class="button button-grey">...</button>
<button class="button button-dark">...</button>
<button class="button button-black">...</button>
<button class="button button-white button-border">...</button>
<button class="button button-light button-border">...</button>
<button class="button button-grey button-border">...</button>
<button class="button button-dark button-border">...</button>
<button class="button button-black button-border">...</button>
<button class="button button-white button-text">...</button>
<button class="button button-light button-text">...</button>
<button class="button button-grey button-text">...</button>
<button class="button button-dark button-text">...</button>
<button class="button button-black button-text">...</button>

CSS

--button-white-color: var(--black);
--button-light-color: var(--dark);
--button-grey-color: var(--white);
--button-dark-color: var(--white);
--button-black-color: var(--white);

Palettes

Disabled

HTML

<button class="button button-primary">...</button>
<button class="button button-secondary">...</button>
<button class="button button-tertiary">...</button>
<button class="button button-primary button-border">...</button>
<button class="button button-secondary button-border">...</button>
<button class="button button-tertiary button-border">...</button>
<button class="button button-primary button-text">...</button>
<button class="button button-secondary button-text">...</button>
<button class="button button-tertiary button-text">...</button>

CSS

--button-primary-color: var(--white);
--button-secondary-color: var(--white);
--button-tertiary-color: var(--white);

Indicators

Disabled

HTML

<button class="button error">...</button>
<button class="button warning">...</button>
<button class="button success">...</button>
<button class="button info">...</button>
<button class="button error button-border">...</button>
<button class="button warning button-border">...</button>
<button class="button success button-border">...</button>
<button class="button info button-border">...</button>
<button class="button error button-text">...</button>
<button class="button warning button-text">...</button>
<button class="button success button-text">...</button>
<button class="button info button-text">...</button>

CSS

--button-error-color: var(--white);
--button-warning-color: var(--white);
--button-success-color: var(--white);
--button-info-color: var(--white);

Related