<button></button>

@import "compass/css3";

$d-btn: 27em;
$d-hole: 1.25em;
$r-hole: .5*$d-hole;
$bw: 1.5em;
$r-pos: .5*($d-btn - $bw);
$n-leds: 24;
$ba-led: 360deg/$n-leds;
$d-led: 1em;
$r-led: .5*$d-led;
$k: 7;
$leds: ();

@for $i from 0 to $n-leds {
	$a: $i*$ba-led - 90deg;
	$x: .5*$d-btn + $r-pos*cos($a) - $r-led;
	$y: .5*$d-btn + $r-pos*sin($a) - $r-led;
	$leds: $leds, 
		if($i < $k, 
			(radial-gradient(circle, #01d6ff, 
				  #178b98 .5*$r-led, 
				  rgba(#01d6ff, .35) .7*$r-led, 
				  rgba(#01d6ff, 0) 1.3*$r-led) no-repeat 
				#{$x - $r-led} #{$y - $r-led} / 
				#{2*$d-led} #{2*$d-led} border-box), 
			(radial-gradient(circle, #898989, 
				  #4d4d4d .5*$r-led, #999 .65*$r-led, 
				  rgba(#999, 0) .7*$r-led) no-repeat 
				$x $y / #{$d-led} #{$d-led} border-box)
		), 
		radial-gradient(circle, 
			  rgba(#e8e8e8, .5) .5*$r-led, 
			  rgba(#e8e8e8, 0) .7*$r-led) no-repeat 
		  $x ($y + .125em) / #{$d-led} #{$d-led} 
		  border-box;
}

body {
	overflow: hidden;
	margin: 0;
	display: flex;
	justify-content: center;
	height: 100vh;
	background: #252525;
}

button {
	align-self: center;
	box-sizing: border-box;
	border: solid $bw transparent;
	padding: 1.5em;
	width: $d-btn; height: $d-btn;
	border-radius: 50%;
	transform: scale(.75);
	box-shadow: 
		0 -1px 1px #eee, 
		0 2px 2px #1d1d1d, 
		inset 0 0 1px #666, 
		inset 0 1px .125em #8b8b8b, 
		inset 0 2px .25em #a4a2a3, 
		inset 0 -1px .125em #8b8b8b, 
		inset 0 -2px .25em #a4a2a3, 
		inset 0 0 0 .375em #cdcdcd;
	background:
		/* ======= content-box ======= */
		/* circular lines */
		repeating-radial-gradient(
			  rgba(#e4e4e4, 0) 0,   
			  rgba(#e4e4e4, 0) 23px, 
			  rgba(#e4e4e4, .05) 25px, 
			  rgba(#e4e4e4, 0) 27px) content-box, 
		repeating-radial-gradient(
			  rgba(#a6a6a6, 0) 0,   
			  rgba(#a6a6a6, 0) 13px, 
			  rgba(#a6a6a6, .05) 15px, 
			  rgba(#a6a6a6, 0) 17px) content-box, 
		repeating-radial-gradient(
			  rgba(#8b8b8b, 0) 0,   
			  rgba(#8b8b8b, 0) 19px, 
			  rgba(#8b8b8b, .05) 21px, 
			  rgba(#8b8b8b, 0) 23px) content-box, 
		/* rays */
		conic-gradient(
			  #cdcdcd, #9d9d9d, #808080, 
			  #bcbcbc, #c4c4c4, #e6e6e6, 
			  #dddddd, #a1a1a1, #7f7f7f, 
			  #8b8b8b, #bfbfbf, #e3e3e3, 
			  #d2d2d2, #a6a6a6, #858585, 
			  #8d8d8d, #c0c0c0, #e5e5e5, 
			  #d6d6d6, #9e9e9e, #828282, 
			  #8f8f8f, #bdbdbd, #e3e3e3, #cdcdcd) 
		  content-box, 
		
		/* ======= padding-box ======= */
		/* cyan glow */
		radial-gradient(
			#00d7ff 56%, transparent 65%) padding-box, 
		/* holes */
		radial-gradient(
			  #272727 20%, transparent 25%) 
		  0 0 / #{$d-hole} #{$d-hole} 
		  padding-box,
		radial-gradient(
			  #272727 20%, transparent 25%) 
		  $r-hole $r-hole / #{$d-hole} #{$d-hole} 
		  padding-box,
		radial-gradient(#444 20%, transparent 28%) 
		  0 .125em / #{$d-hole} #{$d-hole} 
		  padding-box,
		radial-gradient(#444 20%, #3d3d3d 28%) 
		  #{$r-hole} #{$r-hole + .125em} / #{$d-hole} #{$d-hole} 
		  padding-box, 
		
		/* ======= border-box ======= */
		/* leds */
		$leds, 
		/* ring */
		conic-gradient(
			#b5b5b5, #8d8d8d, #838383, 
			#ababab, #d7d7d7, #e3e3e3, 
			#aeaeae, #8f8f8f, #878787, 
			#acacac, #d7d7d7, #dddddd, 
			#b8b8b8, #8e8e8e, #848484, 
			#a6a6a6, #d8d8d8, #e3e3e3, 
			#8e8e8e, #868686, #a8a8a8, 
			#d5d5d5, #dedede, #b5b5b5) border-box;
	font-size: 1.25em;
	cursor: pointer;
}