open-props/css/packs/buttons/index.css

<div align="center">

@import '../../media-queries.css';

:where(
		.btn,
		button,
		input:is([type='button'], [type='submit'], [type='reset'])
	),
:where(input[type='file'])::-webkit-file-upload-button,
:where(input[type='file'])::file-selector-button {
	--_accent: initial /* your color */;
	--_text: initial /* your text color */;
	--_size: initial /* your size */;

	--_bg-light: white;
	--_bg-dark: var(--surface-3);
	--_bg: var(--_bg-light);

	--_border: var(--surface-2);

	--_highlight-size: 0;
	--_highlight-light: oklch(70% 100% var(--palette-hue) / 25%);
	--_highlight-dark: oklch(70% 50% var(--palette-hue) / 25%);
	--_highlight: var(--_highlight-light);

	--_ink-shadow-light: 0 1px 0 var(--color-3);
	--_ink-shadow-dark: 0 1px 0 var(--surface-1);
	--_ink-shadow: var(--_ink-shadow-light);

	--_icon-size: var(--size-relative-7, 2ch);
	--_icon-color: var(--_accent, var(--link));

	font-size: var(--_size);
	background: var(--_bg);
	color: var(--_text);
	border: var(--border-size-2) solid var(--_border);
	box-shadow:
		var(--shadow-2),
		0 1px var(--surface-3),
		0 0 0 var(--_highlight-size) var(--_highlight);
	text-shadow: var(--_ink-shadow);

	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: var(--size-2);

	font-weight: var(--font-weight-7);
	border-radius: var(--radius-2);
	padding-block: 1ex;
	padding-inline: 2ex;

	user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;

	transition: border-color 0.5s var(--ease-3);

	@media (--OSdark) {
		--_highlight: var(--_highlight-dark);
		--_bg: var(--_bg-dark);
		--_ink-shadow: var(--_ink-shadow-dark);
	}

	@media (--motionOK) {
		transition:
			border-color 0.5s var(--ease-3),
			box-shadow 145ms var(--ease-spring-3, var(--ease-4)),
			outline-offset 145ms var(--ease-spring-3, var(--ease-4));
	}
}

:where(
		.btn,
		button,
		input:is([type='button'], [type='submit'], [type='reset'])
	) {
	/* disabled */
	&[disabled] {
		--_bg: none;
		--_text: var(--color-6);
		cursor: not-allowed;
		box-shadow: var(--shadow-1);

		@media (--OSdark) {
			--_text: var(--color-5);
		}
	}

	/* pressing */
	&:where(:not(:active):hover) {
		--_highlight-size: var(--size-2);
		transition-duration: 0.25s;
	}

	/* icons */
	& > :where(svg) {
		flex-shrink: 0;
		filter: drop-shadow(var(--_ink-shadow));
		block-size: var(--_icon-size);
		inline-size: var(--_icon-size);
	}

	& > :where(svg > *) {
		stroke: var(--_icon-color);
		stroke-width: var(--border-size-2);
	}
}

/* adaptive indigo text */
:where([type='submit'], form button:not([type], [disabled])) {
	--_text: var(--_accent, var(--link));
}

/* red reset */
:where([type='reset']) {
	--_text: var(--red-6, #fa5252);
	--_border: var(--red-3, #ffa8a8);

	&:focus-visible {
		outline-color: var(--red-6, #fa5252);
	}

	@media (--OSdark) {
		--_text: var(--red-2, #ffc9c9);
		--_border: var(--surface-3);
	}
}

/* submit, form > button, reset matching hover border color */
:where([type='submit'], [type='reset'], form button:not([type])):is(
		:hover,
		:focus-visible
	):not([disabled]) {
	--_border: currentColor;
}

/* file input */
:where(input[type='file']) {
	max-inline-size: 100%;
	padding: 0;
	cursor: initial;
	align-self: flex-start;
	border-radius: var(--radius-2);
	border: var(--border-size-1) solid var(--surface-2);
	box-shadow: var(--inner-shadow-4);
	color: var(--text-2);
}

:where(input[type='file'])::-webkit-file-upload-button,
:where(input[type='file'])::file-selector-button {
	margin-inline-end: 2ex;
	cursor: pointer;
}

/* special dark theme styles */
@media (--OSdark) {
	:where([type='submit']),
	:where(form button:not([type='button'])),
	:where([type='reset']),
	:where([disabled]) {
		--_bg: var(--surface-1);
	}
}