<button></button>
@import "compass/css3";

$d-btn: 27em; /* control diameter */
$bw: 1.5em; /* border-width */
$d-hole: 1.25em; /* perforation diameter */
$r-hole: .5*$d-hole; /* perforation radius */

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%;
	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 - 13, 19, 23 being prime numbers */
		repeating-radial-gradient(
		  	rgba(#e4e4e4, 0) 23px, 
		  	rgba(#e4e4e4, .05) 25px, 
		  	rgba(#e4e4e4, 0) 27px) content-box, 
		repeating-radial-gradient(
		  	rgba(#a6a6a6, 0) 13px, 
		  	rgba(#a6a6a6, .05) 15px, 
		  	rgba(#a6a6a6, 0) 17px) content-box, 
		repeating-radial-gradient(
		  	rgba(#8b8b8b, 0) 19px, 
		  	rgba(#8b8b8b, .05) 21px, 
		  	rgba(#8b8b8b, 0) 23px) content-box, 
		/* conic reflections */
		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 53%, transparent 65%, 
			  transparent 70%, #8b8b8b 70%) 
		  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;
}
View Compiled

External CSS

  1. https://leaverou.github.io/conic-gradient/conic-gradient.js

External JavaScript

This Pen doesn't use any external JavaScript resources.