<button id='b00' class='press-on'>Press me, please!</button>
<button id='b01'>Press me, please!</button>
<button id='b02' class='press-on invert'>Press me, please!</button>
<button id='b03'>Press me, please!</button>
<button id='b04'>Press me, please!</button>
<button id='b05' class='invert'>Press me, please!</button>
<button id='b06'>Press me, please!</button>
<button id='b07'>Press me, please!</button>
<button id='b08'>Press me, please!</button>
<button id='b09'>Press me, please!</button>
<button id='b10' class='invert'>Press me, please!</button>
<button id='b11'>Press me, please!</button>
<button id='b12' class='invert'>Press me, please!</button>
$button-b: .125em;
$button-w: 8.5em;
$button-h: 2em;
$move-act: .125em;

html { font-size: 1.75em }

@media (max-width: 450px) { html { font-size: 1em } }

@media (max-width: 265px) { html { font-size: .625em } }

body {
	$over: rgba(mix(white, purple, 65%), .5);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	margin: 0;
	min-width: 160px; min-height: 100vh;
	background: 
		linear-gradient($over, $over), 
		url(https://images.unsplash.com/photo-1508697014387-db70aad34f4d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=0888096c287374042dd1d0c300939487) 50%/ cover;
}

button {
	position: relative;
	margin: .5em;
	border: solid .125em transparent;
	padding: 0;
	width: $button-w; height: $button-h;
	border-radius: .5*$button-h;
	color: #fff;
	text-shadow: 1px 1px var(--c-sh-txt, #{rgba(#000, .5)});
	font: 900 1.5em calligraffitti, cursive;
	filter: contrast(.65);
	transition: .2s ease-out;
	cursor: pointer;
	
	&:hover, &:focus {
		outline: none;
		filter: none
	}
	
	&:active { transform: translatey($move-act); }
}

.press-on {
	&:after {
		$expand: 1em;
		position: absolute;
		top: calc(100% + #{2*$move-act});
		right: -$expand; left: -$expand;
		height: 4*$move-act;
		background: radial-gradient(rgba(#000, .25), transparent 50%);
		transition: inherit;
		content: ''
	}
	
	&:active:after { transform: translatey(-$move-act) scale(1.125, 1.25) }
}

.invert {
	color: #000;
	--c-sh-txt: #{rgba(#fff, .5)};
}

#b00 {
	box-shadow: inset 0 0 .125em rgba(#fff, .75);
	background: 
		linear-gradient(#f8e7e8, #e30001, #bc0000) content-box, 
		linear-gradient(-80deg, #f11f20, #9c1c1c, #f11f20) 0/ 37% 100% border-box;
}

#b01 {
	background: 
		radial-gradient(at 50% 100%, darken(#0073bf, 7%), rgba(#0073bf, 0) 70%) 
			left 50% bottom #{$move-act}/ 41% $move-act no-repeat content-box, 
		radial-gradient(at 50% 0, #2b9bd8, rgba(#2b9bd8, 0) 70%) 
			50% 100%/ 41% $move-act no-repeat content-box, 
		radial-gradient(at 90% 0%, rgba(#fff, .2) 50%, rgba(#fff, 0) 51%) 
			50%/ 100% 215% border-box, 
		linear-gradient(#2899e9, #0161b0) content-box, 
		linear-gradient(#1a77be, #5bbaf5) border-box;
}

#b02 {
	border-radius: 2*$button-b;
	box-shadow: inset 0 $move-act $move-act (-$move-act) #fff;
	background: 
		linear-gradient(#e7aaaa, #bc0001) content-box, 
		linear-gradient(#ca7574, #910000) border-box;
	
	&:before {
		$round-h: .65*$button-h;
		$round-o: 2.25*$button-b;
		box-sizing: border-box;
		display: block;
		margin: -$round-o auto ($round-o - $round-h);
		border: solid .5*$button-b transparent;
		width: 75%; height: $round-h;
		border-radius: 0 0 50% 50%/ 0 0 100% 100%;
		background: 
			linear-gradient(#e1e1e1, #656668 21%, #fefefe 65%, #78787a) content-box,
			repeating-linear-gradient(20deg, #eeefef 0, #7f7c7d 19%, #eeefef 38%) 
				#{$round-h} / 100% 35% border-box;
		content: ''
	}
}

#b03 {
	box-shadow: 
		inset 0 2px 1px -1px rgba(#fff, .5), 
		inset 0 -2px 1px -1px rgba(#fff, .5);
	background: 
		linear-gradient(175deg, #ed4213 5%, rgba(#ed4213, 0)) content-box, 
		radial-gradient(at 20% -29%, rgba(#fff, 0) 25%, rgba(#fff, .5) 50%, rgba(#fff, 0) 51%) content-box, 
		linear-gradient(#ea3403, #af2621) content-box, 
		linear-gradient(#f15326, #ce2623) border-box;
}

#b04 {
	box-shadow: 
		inset 0 -.25*$button-h .25*$button-h #0569b7, 
		inset 0 -.25*$button-h .125rem .25*$button-h #1680cf;
	background: 
		linear-gradient(#3ba1e9, #3996db 50%) content-box, 
		linear-gradient(#317bb5, #2499e6) border-box;
	
	&:before {
		position: absolute;
		bottom: 0; left: 0;
		width: 100%; height: 1.5*$button-b;
		background: radial-gradient(closest-side, #30a2dd, rgba(#30a2dd, 0)) 50%/ 75% 100% no-repeat;
		content: ''
	}
}

#b05 {
	$box-w: $button-h;
	$box-h: .75*$box-w;
	$box-r: 2*$move-act;
	$box-o: $button-b + $box-r;
	$arr-h: .125*$box-w;
	background: none;
	
	&:before {
		position: absolute;
		z-index: -1;
		top: -$button-b; right: -$button-b; bottom: -$button-b; left: -$button-b;
		border: inherit;
		border-radius: inherit;
		box-shadow:  
		inset 0 -.25*$button-h .125rem .5em rgba(mix(#ae0c00, #000, 85%), .35);
		background: 
			radial-gradient(closest-side, #ff532b, rgba(#ff532b, 0)) 
				50% 100%/ 100% 50% no-repeat content-box,
			linear-gradient(90deg, #d02804, rgba(#d02804, 0) 10%, rgba(#d02804, 0) 90%, #d02804) content-box, 
			linear-gradient(#df4d2a, #c84636 29%) content-box, 
			linear-gradient(#e3380e, #cd2002) border-box;
		content: ''
	}
	
	&:after {
		position: absolute;
		z-index: -1;
		left: 15%; top: -$box-o;
		width: $box-w; height: $box-h;
		border-radius: $box-r;
		background:
			radial-gradient(circle at 50% $box-r, #88837f, #bebcbd $box-r, transparent $box-r) -.5*$box-w, 
			radial-gradient(#fff, rgba(#fff, 0) 70%) 0 50%/ #{2*$box-r} 100% no-repeat, 
			radial-gradient(#fff, rgba(#fff, 0) 70%) 100% 50%/ #{2*$box-r} 100% no-repeat, 
			linear-gradient(to right top, #fff 50%, rgba(#fff, 0) 61%) 0 100%/ 50% $arr-h no-repeat, 
			linear-gradient(to left top, #fff 50%, rgba(#fff, 0) 61%) 100% 100%/ 50% $arr-h no-repeat, 
			linear-gradient(#e9e9e9 $box-r, #f0f0f0 43%, #9d9d9f);
		clip-path: polygon(0 0, 0 $box-r, $box-r $box-r, $box-r calc(100% - #{$arr-h}), 50% 100%, calc(100% - #{$box-r}) calc(100% - #{$arr-h}), calc(100% - #{$box-r}) $box-r, 100% $box-r, 100% 0);
		content: ''
	}
}

#b06 {
	border-radius: 4*$button-b;
	box-shadow: inset 0 1px 1px #9c9c9c;
	background: 
		radial-gradient(at 0 -15%, rgba(#fff, .07) 70%, rgba(#fff, 0) 71%) 0 0/ 80% 90% no-repeat content-box, 
		linear-gradient(#4e4e4e, #040404) content-box, 
		linear-gradient(#292929, #010101) border-box;
}

#b07 {
	border-radius: 4*$button-b;
	box-shadow: 
		inset 0 1px 1px #6ab9f0, 
		inset 0 -1px 1px #6ab9f0, 
		inset 0 -.625*$button-h .125rem #238cd8, 
		inset 0 -.375*$button-h .25*$button-h (-.125*$button-h);	
	background: linear-gradient(#61a0d1, #3d8ecd) border-box;
	
	&:after {
		position: absolute;
		left: 50%; bottom: 0;
		width: 80%; height: 1.5*$move-act;
		transform: translate(-50%);
		background: radial-gradient(closest-side, rgba(aqua, .5), rgba(#6ab9f0, 0));
		content: ''
	}
}

#b08 {
	$bar-d: .625*$button-h;
	$bar-r: 1.5*$button-b;
	$bar-o: .5*$button-b + $bar-r;
	$arr-d: $bar-d - 2*$bar-r;
	$arr-c: 1.25*$bar-r;
	
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	border-width: .5*$button-b;
	border-radius: 3*$button-b;
	box-shadow: 
		inset 0 0 1px 1px #0277c7, 
		inset 0 -.5*$button-h .125rem #1a7dce;
	background: 
		linear-gradient(#3d99d8, #4398da 33%) content-box, 
		linear-gradient(#8bc1e5, #1078c4) border-box;
	
	&:before, &:after {
		order: 1;
		content: ''
	}
	
	&:before {
		margin-top: -3*$bar-r;
		margin-right: $bar-r;
		margin-left: -.5*$arr-d;
		width: $arr-d; height: $arr-d;
		transform: translate(-1px) rotate(45deg);
		box-shadow: inset -1px 1px 2px #78b9e5;
		background: 
			linear-gradient(45deg, #78b9e5 50%, rgba(#78b9e5, 0) calc(50% + 2px)) 0 0/ #{$arr-c} #{$arr-c} no-repeat, 
			linear-gradient(45deg, #78b9e5 50%, rgba(#78b9e5, 0) calc(50% + 2px)) 100% 100%/ #{$arr-c} #{$arr-c} no-repeat, 
			linear-gradient(-45deg, #2497ea, #2999ea);
		clip-path: polygon(0 0, 100% 0, 100% 100%);
		filter: drop-shadow(1px 0 1px #17639a)
	}
	
	&:after {
		margin-left: -$bar-o;
		width: $bar-d; height: $bar-d;
		border-radius: 100% 0 0 #{$bar-r}/ #{2*$bar-r} #{$bar-r};
		box-shadow: inset 0 1px 1px #78b9e5, 
			inset 0 .5*($arr-d - $bar-r) .5rem #2999ea, 
			inset 0 calc(#{$arr-d - $bar-r} - 2px) 1px #2497ea, 
			inset 0 calc(#{$arr-d - $bar-r} - 1px) 1px #78b9e5, 
			inset 0 ($arr-d - $bar-r) 1px #17639a;
		background: 
			radial-gradient(circle at $bar-r calc(100% - #{$bar-r}), #2189d9 .9*$bar-r, #3690d6 $bar-r, transparent 0), 
			linear-gradient(90deg, #3690d6 $bar-r, transparent 0);
		clip-path: polygon(0 0, 0 100%, $bar-r 100%, $bar-r calc(100% - #{2*$bar-r}), 100% calc(100% - #{2*$bar-r}), 100% 0)
	}
}

#b09 {
	background: 
		radial-gradient(at 80% 0, rgba(#fdd, .15) 50%, transparent 51%) 50%/ 150% 210% border-box, 
		radial-gradient(closest-side, #ff5735, rgba(#cf2705, 0)) 50% 100%/ 80% $button-b no-repeat, 
		linear-gradient(#e73200, crimson) content-box, 
		linear-gradient(#ba3e38, #f07252) border-box;
}

#b10 {
	box-shadow: 0 0 0 .5*$button-b #cbcbcb;
	background: 
		linear-gradient(#b2b2b2, #f4f4f4) content-box, 
		radial-gradient(#ededed, rgba(#dedede, 0)) 
			50% 100% / 80% $button-b no-repeat border-box, 
		linear-gradient(#f4f4f4, #c9c9c9) border-box;
}

#b11 {
	box-shadow: 
		inset 0 -.25*$button-h .125rem .25*$button-h #cb2406;
	background: 
		linear-gradient(#df330a, #d24324 33%) content-box, 
		linear-gradient(#bd291b, #e54419) border-box;
	
	&:after {
		position: absolute;
		bottom: 0; left: 0; right: 0;
		height: 2*$button-b;
		background: 
			radial-gradient(at 50% 100%, #ab1207, transparent 70%) 50% 0/ 75% $button-b no-repeat, 
			radial-gradient(closest-side, #ea5027, transparent) 50% 100%/ 80% $button-b no-repeat;
		content: ''
	}
}

#b12 {	
	$arr-d: .375*$button-h;
	
	padding-right: $arr-d + 2*$button-b;
	background: 
		radial-gradient(at 50% 100%, #a5a5a5, rgba(#d5d5d5, 0) 70%) 
			left 50% bottom #{$button-b}/ 80% $button-b no-repeat padding-box, 
		radial-gradient(closest-side, #f5f5f5, rgba(#d5d5d5, 0)) 
			50% 100%/ 80% $button-b no-repeat padding-box, 
		linear-gradient(#f8f8f8, #b5b5b5) padding-box, 
		linear-gradient(#c4c4c4, #d2d2d2) border-box;
	
	&:before, &:after {
		width: $arr-d; height: $arr-d;
		top: calc(50% - #{.5*$arr-d}); right: 3*$button-b;
		position: absolute;
		border-radius: $button-b;
		background: #fff;
		color: #b2b2b2;
		content: ''
	}
	
	&:before {
		z-index: 2;
		border-radius: $button-b $button-b 0 0;
		transform: translatey(-10%) scalex(.75);
		box-shadow: inset 0 .125rem currentcolor, 
			 inset .1875rem 0 currentcolor, 
			 inset -.1875rem 0 currentcolor;
		clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%)
	}
	
	&:after {
		box-shadow: inset -.125rem .125rem 0 currentcolor;
		transform: translatey(19%) rotate(135deg);
		background: linear-gradient(45deg, currentcolor calc(50% + .125rem), #fff 0);
		clip-path: polygon(0 0, 100% 0, 100% 100%)
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.