bgenc.net/src/_button.scss

@mixin button($color-bg, $color-text, $scale: 1) {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	color: $color-text;
	font-weight: 600;
	text-decoration: none;
	opacity: 0.8;
	background-color: $color-bg;
	padding: calc(0.5rem * $scale) calc(1rem * $scale);
	font-size: calc(1rem * $scale);
	clip-path: polygon(
		0px 0px,
		calc(100% - 10px * $scale) 0px,
		100% calc(40px * $scale),
		calc(10px * $scale) calc(40px * $scale)
	);
	transition: all var(--animation-speed) var(--animation-type);
	user-select: none;

	&:hover,
	&:focus-visible {
		opacity: 1;
		text-decoration-color: unset;
	}
}