<fieldset>
	<legend>c-btn</legend>
	<button type="button" class="c-btn">Default</button>
	<button type="button" class="c-btn c-btn--active">Active</button>
	<button type="button" class="c-btn" disabled>Disabled</button>
	<button type="button" class="c-btn c-btn--focus">Focus</button>
	<button type="button" class="c-btn c-btn--hover">Hover</button>
</fieldset>

<fieldset>
	<legend>c-btn c-btn--green</legend>
	<button type="button" class="c-btn c-btn--green">Default</button>
	<button type="button" class="c-btn c-btn--green c-btn--active">Active</button>
	<button type="button" class="c-btn c-btn--green" disabled>Disabled</button>
	<button type="button" class="c-btn c-btn--green c-btn--focus">Focus</button>
	<button type="button" class="c-btn c-btn--green c-btn--hover">Hover</button>
</fieldset>

<fieldset>
	<legend>c-btn c-btn--red</legend>
	<button type="button" class="c-btn c-btn--red">Default</button>
	<button type="button" class="c-btn c-btn--red c-btn--active">Active</button>
	<button type="button" class="c-btn c-btn--red" disabled>Disabled</button>
	<button type="button" class="c-btn c-btn--red c-btn--focus">Focus</button>
	<button type="button" class="c-btn c-btn--red c-btn--hover">Hover</button>
</fieldset>

<fieldset>
	<legend>c-btn c-btn--grey</legend>
	<button type="button" class="c-btn c-btn--grey">Default</button>
	<button type="button" class="c-btn c-btn--grey c-btn--active">Active</button>
	<button type="button" class="c-btn c-btn--grey" disabled>Disabled</button>
	<button type="button" class="c-btn c-btn--grey c-btn--focus">Focus</button>
	<button type="button" class="c-btn c-btn--grey c-btn--hover">Hover</button>
</fieldset>

<fieldset>
	<legend>c-btn c-btn--outline</legend>
	<button type="button" class="c-btn c-btn--outline">Default</button>
	<button type="button" class="c-btn c-btn--outline c-btn--active">Active</button>
	<button type="button" class="c-btn c-btn--outline" disabled>Disabled</button>
	<button type="button" class="c-btn c-btn--outline c-btn--focus">Focus</button>
	<button type="button" class="c-btn c-btn--outline c-btn--hover">Hover</button>
</fieldset>

<fieldset>
	<legend>c-btn c-btn--outline c-btn--green</legend>
	<button type="button" class="c-btn c-btn--outline c-btn--green">Default</button>
	<button type="button" class="c-btn c-btn--outline c-btn--green c-btn--active">Active</button>
	<button type="button" class="c-btn c-btn--outline c-btn--green" disabled>Disabled</button>
	<button type="button" class="c-btn c-btn--outline c-btn--green c-btn--focus">Focus</button>
	<button type="button" class="c-btn c-btn--outline c-btn--green c-btn--hover">Hover</button>
</fieldset>

<fieldset>
	<legend>c-btn c-btn--outline c-btn--red</legend>
	<button type="button" class="c-btn c-btn--outline c-btn--red">Default</button>
	<button type="button" class="c-btn c-btn--outline c-btn--red c-btn--active">Active</button>
	<button type="button" class="c-btn c-btn--outline c-btn--red" disabled>Disabled</button>
	<button type="button" class="c-btn c-btn--outline c-btn--red c-btn--focus">Focus</button>
	<button type="button" class="c-btn c-btn--outline c-btn--red c-btn--hover">Hover</button>
</fieldset>

<fieldset>
	<legend>c-btn c-btn--outline c-btn--grey</legend>
	<button type="button" class="c-btn c-btn--outline c-btn--grey">Default</button>
	<button type="button" class="c-btn c-btn--outline c-btn--grey c-btn--active">Active</button>
	<button type="button" class="c-btn c-btn--outline c-btn--grey" disabled>Disabled</button>
	<button type="button" class="c-btn c-btn--outline c-btn--grey c-btn--focus">Focus</button>
	<button type="button" class="c-btn c-btn--outline c-btn--grey c-btn--hover">Hover</button>
</fieldset>

<fieldset>
	<legend>c-btn c-btn--link</legend>
	<button type="button" class="c-btn c-btn--link">Default</button>
	<button type="button" class="c-btn c-btn--link c-btn--active">Active</button>
	<button type="button" class="c-btn c-btn--link c-btn--link" disabled>Disabled</button>
	<button type="button" class="c-btn c-btn--link c-btn--focus">Focus</button>
	<button type="button" class="c-btn c-btn--link c-btn--hover">Hover</button>
</fieldset>

<p>Switch to "Dark Mode" to see alternate versions.<br />Article about this Pen on <a href="https://dev.to/madsstoumann/creating-a-button-library-4lb4">dev.to</a></p>
.c-btn {
	/* Custom Properties */
	--btn-ai: center;
	--btn-bdc: hsl(201, 79%, 46%);
	--btn-bdw: 0.125rem;
	--btn-bdrs: 0.375rem;
	--btn-bgc: hsl(201, 79%, 46%);
	--btn-bxsh: transparent;
	--btn-bxsh--sz: 0 0 0 0.2rem;
	--btn-c: hsl(195, 100%, 100%);
	--btn-cur: pointer;
	--btn-ff: ui-sans-serif, system-ui, sans-serif;
	--btn-fl: none;
	--btn-fz: 1rem;
	--btn-fw: 400;
	--btn-ico-mis: 0.375rem;
	--btn-lh: 1;
	--btn-ol: none;
	--btn-p-lr: 2rem;
	--btn-p-tb: 0.875rem;
	--btn-trsdu: 200ms;
	--btn-trstf: ease-in-out; 
	--btn-w: auto;

	/* Active */
	--btn-bdc--act: hsl(201, 79%, 46%);
	--btn-bgc--act: hsl(201, 79%, 46%);
	--btn-bxsh--act: var(--btn-bxsh--sz) hsl(197, 92%, 61%);
	--btn-c--act: hsl(195, 100%, 100%);

	/* Disabled */
	--btn-bdc--dis: transparent;
	--btn-bgc--dis:  hsl(201, 50%, 90%);
	--btn-bxsh--dis: none;
	--btn-c--dis: hsl(211, 13%, 65%);

	/* Focus */
	--btn-bdc--foc: hsl(201, 79%, 46%);
	--btn-bgc--foc: hsl(201, 79%, 46%);
	--btn-bxsh--foc: var(--btn-bxsh--sz) hsl(197, 92%, 61%);
	--btn-c--foc: hsl(195, 100%, 100%);

	/* Hover */
	--btn-bdc--hov: transparent;
	--btn-bgc--hov: hsl(203, 87%, 34%);
	--btn-bxsh--hov: none;
	--btn-c--hov: hsl(195, 100%, 100%);

	align-items: var(--btn-ai);
	background-color: var(--btn-bgc);
	border-color: var(--btn-bdc);
	border-radius: var(--btn-bdrs);
	border-style: solid;
	border-width: var(--btn-bdw);
	box-shadow: var(--btn-bxsh--sz) var(--btn-bxsh);
	box-sizing: border-box;
	color: var(--btn-c);
	cursor: var(--btn-cur);
	display: inline-flex;
	float: var(--btn-fl);
	font-family: var(--btn-ff);
	font-size: var(--btn-fz);
	font-weight: var(--btn-fw);
	justify-content: center;
	line-height: var(--btn-lh);
	outline: var(--btn-ol);
	padding: var(--btn-p-tb) var(--btn-p-lr);
	position: relative;
	transition: all var(--btn-trsdu) var(--btn-trstf);
	width: var(--btn-w);
}

/* State */
.c-btn:active,
.c-btn--active {
	background-color: var(--btn-bgc--act);
	border-color: var(--btn-bdc--act);
	box-shadow: var(--btn-bxsh--act);
	color: var(--btn-c--act);
}
.c-btn:active:hover,
.c-btn--active:hover {
	--btn-bxsh--hov: var(--btn-bxsh--act);
}
.c-btn:disabled,
.c-btn--disabled {
	--btn-cur: not-allowed;
	background-color: var(--btn-bgc--dis);
	border-color: var(--btn-bdc--dis);
	box-shadow: var(--btn-bxsh--dis);
	color: var(--btn-c--dis);
	
}
.c-btn:focus,
.c-btn--focus {
	background-color: var(--btn-bgc--foc);
	border-color: var(--btn-bdc--foc);
	box-shadow: var(--btn-bxsh--foc);
	color: var(--btn-c--foc);
}
.c-btn[hidden] {
	display: none;
}

@media (hover: hover) {
	.c-btn:focus:hover,
	.c-btn--focus:hover {
		--btn-bxsh--hov: var(--btn-bxsh--foc);
	}
	.c-btn:not(:disabled):hover,
	.c-btn--hover {
		background-color: var(--btn-bgc--hov);
		border-color: var(--btn-bdc--hov);
		box-shadow: var(--btn-bxsh--hov);
		color: var(--btn-c--hov);
	}
}

/* Modifers: Color Variants */
.c-btn--green {
	--btn-bdc: hsl(162, 63%, 41%);
	--btn-bdc--act: hsl(162, 63%, 41%);
	--btn-bdc--foc: hsl(162, 63%, 41%);
	--btn-bgc: hsl(162, 63%, 41%);
	--btn-bgc--act: hsl(162, 63%, 41%);
	--btn-bgc--dis: hsl(162, 50%, 90%);
	--btn-bgc--foc: hsl(162, 63%, 41%);
	--btn-bgc--hov: hsl(168, 80%, 23%);
	--btn-bxsh--act: var(--btn-bxsh--sz) hsl(158, 58%, 62%);
	--btn-bxsh--foc: var(--btn-bxsh--sz) hsl(158, 58%, 62%);
	--btn-c: hsl(152, 68%, 100%);
	--btn-c--hov: hsl(152, 68%, 100%);
}
.c-btn--grey {
	--btn-bdc: hsl(211, 12%, 43%);
	--btn-bdc--act: hsl(211, 12%, 43%);
	--btn-bdc--foc: hsl(211, 12%, 43%);
	--btn-bgc: hsl(211, 12%, 43%);
	--btn-bgc--act: hsl(211, 12%, 43%);
	--btn-bgc--dis: hsl(214, 15%, 91%);
	--btn-bgc--foc: hsl(211, 12%, 43%);
	--btn-bgc--hov: hsl(209, 20%, 25%);
	--btn-bxsh--act: var(--btn-bxsh--sz) hsl(214, 15%, 91%);
	--btn-bxsh--foc: var(--btn-bxsh--sz) hsl(214, 15%, 91%);
	--btn-c: hsl(216, 33%, 97%);
	--btn-c--hov: hsl(216, 33%, 97%);
}
.c-btn--red {
	--btn-bdc: hsl(356, 75%, 53%);
	--btn-bdc--act: hsl(356, 75%, 53%);
	--btn-bdc--foc: hsl(356, 75%, 53%);
	--btn-bgc: hsl(356, 75%, 53%);
	--btn-bgc--act: hsl(356, 75%, 53%);
	--btn-bgc--dis: hsl(356, 50%, 90%);
	--btn-bgc--foc: hsl(356, 75%, 53%);
	--btn-bgc--hov: hsl(352, 90%, 35%);
	--btn-bxsh--act: var(--btn-bxsh--sz) hsl(360, 91%, 69%);
	--btn-bxsh--foc: var(--btn-bxsh--sz) hsl(360, 91%, 69%);
	--btn-c: hsl(360, 100%, 100%);
	--btn-c--hov: hsl(360, 100%, 100%);
}

/* Modifiers: Style */
.c-btn--link {
	--btn-bdc: transparent;
	--btn-bdc--act: hsl(214, 15%, 91%);
	--btn-bdc--foc: hsl(214, 15%, 91%);
	--btn-bgc: transparent;
	--btn-bgc--act: transparent;
	--btn-bgc--dis: transparent;
	--btn-bgc--foc: transparent;
	--btn-bgc--hov: transparent;
	--btn-bxsh--act: none;
	--btn-bxsh--foc: none;
	--btn-c: hsl(203, 87%, 34%);
	--btn-c--act: hsl(203, 87%, 34%);
	--btn-c--foc: hsl(203, 87%, 34%);
	--btn-c--hov: hsl(203, 87%, 34%);
}
.c-btn--link:not(:disabled):hover {
	text-decoration: underline;
}
.c-btn--link:active:hover,
.c-btn--link.c-btn--active:hover {
	--btn-bdc--hov: var(--btn-bdc--act);
}
.c-btn--link:focus:hover,
.c-btn--link.c-btn--focus:hover {
	--btn-bdc--hov: var(--btn-bdc--foc);
}
.c-btn--outline {
	--btn-bgc: transparent;
	--btn-bgc--act: transparent;
	--btn-bgc--foc: transparent;
	--btn-bgc--hov: var(--btn-bdc);
	--btn-c: var(--btn-bdc);
	--btn-c--act: var(--btn-bdc);
	--btn-c--foc: var(--btn-bdc);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
	.c-btn {
		--btn-bdc: hsl(195, 100%, 85%);
		--btn-bdc--act: hsl(195, 100%, 85%);
		--btn-bdc--dis: hsl(214, 15%, 91%);
		--btn-bdc--foc: hsl(195, 100%, 85%);
		--btn-bdc--hov: hsl(195, 100%, 85%);
		--btn-bgc--dis: hsl(214, 15%, 91%);
		--btn-bgc--hov: hsl(203, 87%, 34%);
		--btn-c--dis: hsl(211, 12%, 43%);
	}
	.c-btn--green {
		--btn-bdc: hsl(154, 75%, 87%);
		--btn-bdc--act: hsl(154, 75%, 87%);
		--btn-bdc--foc: hsl(154, 75%, 87%);
		--btn-bdc--hov: hsl(154, 75%, 87%);
		--btn-bgc--hov: hsl(168, 80%, 23%);
	}
	.c-btn--grey {
		--btn-bdc: hsl(214, 15%, 91%);
		--btn-bdc--act: hsl(214, 15%, 91%);
		--btn-bdc--foc: hsl(214, 15%, 91%);
		--btn-bdc--hov: hsl(214, 15%, 91%);
		--btn-bgc--hov: hsl(168, 80%, 23%);
	}
	.c-btn--red {
		--btn-bdc: hsl(338, 100%, 86%);
		--btn-bdc--act: hsl(338, 100%, 86%);
		--btn-bdc--foc: hsl(338, 100%, 86%);
		--btn-bdc--hov: hsl(338, 100%, 86%);
		--btn-bgc--hov: hsl(352, 90%, 35%);
	}
	.c-btn--link {
		--btn-bdc: transparent;
		--btn-bdc--dis: transparent;
		--btn-bdc--hov: transparent;
		--btn-bgc--dis: transparent;
		--btn-bgc--hov: transparent;
		--btn-c: var(--c-link--dark);
		--btn-c--act: var(--c-link--dark);
		--btn-c--foc: var(--c-link--dark);
		--btn-c--hov: var(--c-link--dark);
	}
}

/* For this demo only */
body { font-family: ui-sans-serif, system-ui, sans-serif;  }
button { margin: .25rem; }
fieldset { border: 0; margin-bottom: 1rem; }
legend { font-family: ui-monospace, monospace; font-weight: 500; }
@media (prefers-color-scheme: dark) {
  body { background-color: #222; color: #EEE; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.