$button-w: 13em;
$button-h: 3em;
$border-t: .125em;
$border-l: .25em;
$border-b: .375em;

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	min-height: 100vh;
	background: radial-gradient(#fbfbfb, #e5e5e5);
}

button {
	display: block;
	position: relative;
	margin: 1rem;
	border: solid 0 transparent;
	border-width: $border-t $border-l $border-b;
	width: $button-w; height: $button-h;
	border-radius: .5*$button-h;
	box-shadow: inset 0 -.375em 1px var(--c-sh-0, #ff8c0c), 
		0 .25em #9f9ea0;
	background: 
		linear-gradient(var(--c-bg-0, #f9ea83), var(--c-bg-1, #ffa903)) padding-box, 
		linear-gradient(#b4bab5, #e0e6dd) border-box;
	color: var(--c, #848483);
	font: 600 1em arial, sans-serif;
	text-align: left;
	text-indent: 1.25em;
	text-shadow: 1px 1px rgba(silver, .5);
	text-transform: uppercase;
	cursor: pointer;
	
	&:after {
		display: flex;
		align-items: center;
		position: absolute;
		top: -$border-t; right: -$border-l; bottom: -$border-b;
		padding: 0 1.25em .5*$border-b .5em;
		border-radius: 0 $button-h $button-h 0;
		box-shadow: inset 0 (-.5*$border-b) 1px var(--c-sh-1, #4f980d), 
			0 $border-b/3 1px var(--c-sh-2, #527235);
		background: linear-gradient(var(--c-bg-2, #cbe949), var(--c-bg-3, #9dc000) 50%, var(--c-bg-4, #7daf00) 0, var(--c-bg-5, #5a7f00));
		color: #fff;
		text-indent: 0;
		content: attr(data-xtra)
	}
	
	&:nth-child(2) {
		--c-sh-0: #265072;
		--c-sh-1: #ff7212;
		--c-sh-2: #754d36;
		--c-bg-0: #13d3f3;
		--c-bg-1: #2c64a9;
		--c-bg-2: #ffca59;
		--c-bg-3: #f7a307;
		--c-bg-4: #da7800;
		--c-bg-5: #b15d00;
		--c: #265072;
		font-size: 1.25em
	}
	
	&:nth-child(3) {
		--c-sh-0: #4f0505;
		--c-sh-1: #858585;
		--c-sh-2: #040404;
		--c-bg-0: #d5412d;
		--c-bg-1: #ca0a0b;
		--c-bg-2: #999;
		--c-bg-3: #606060;
		--c-bg-4: #2f2d2d;
		--c-bg-5: #050505;
		--c: #540303;
		font-size: 1.5em
	}
}