Experiments / CSS tools

CSS button creator

Design-tool style button CSS editor with stateful preview and generated output.

Stage

Previewing base styling.

2 active shadows

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 1px solid #171717;
	border-radius: 999px;
	padding: 12px 22px;
	background: rgba(23, 23, 23, 1.00);
	font-size: 15px;
	font-weight: 650;
	color: #ffffff;
	box-shadow: 0px 12px 26px -10px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.12);
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 1px solid #255b52;
	border-radius: 999px;
	padding: 12px 22px;
	background: rgba(47, 111, 100, 1.00);
	font-size: 15px;
	font-weight: 650;
	color: #ffffff;
	box-shadow: 0px 18px 36px -12px rgba(15, 118, 110, 0.34), 0 0 0 3px rgba(94, 234, 212, 0.28);
}

.button:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 1px solid #134e4a;
	border-radius: 999px;
	padding: 11px 21px;
	background: rgba(15, 63, 58, 1.00);
	font-size: 15px;
	font-weight: 650;
	color: #ffffff;
	box-shadow: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.22), 0px 8px 18px -12px rgba(15, 118, 110, 0.18);
	transform: translateY(1px) scale(0.985);
}

.button:focus-visible {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 1px solid #6366f1;
	border-radius: 999px;
	padding: 12px 22px;
	background: rgba(23, 23, 23, 1.00);
	font-size: 15px;
	font-weight: 650;
	color: #ffffff;
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.42), 0px 12px 26px -10px rgba(0, 0, 0, 0.20);
	outline: none;
}