<button></button>
$l: 15em;
$bw: 1em;

body {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 0;
	height: 100vh;
	background: #aaa;
}

button {
	align-self: center;
	border: solid $bw transparent;
	padding: 3px;
	width: $l; height: $l;
	border-radius: 2.5*$bw;
	box-shadow: 
	  inset 0 0 0 1px #eedc00, 
	  inset 0  1px 2px rgba(#fff, .5), 
	  inset 0 -1px 2px rgba(#000, .5);
  background: 
	  conic-gradient(
		    #edc800, #e3b600, #f3cf00, #ffe800, 
		    #ffe900, #ffeb00, #ffe000, #ebc500, 
		    #e0b100, #f1cc00, #fcdc00, #ffe500, 
		    #fad900, #eec200, #e7b900, #f7d300, 
		    #ffe800, #ffe300, #f5d100, #e6b900, 
		    #e3b600, #f4d000, #ffe400, #ebc600, 
		    #e3b600, #f6d500, #ffe900, #ffe90a, 
		    #edc800) content-box, 
	  linear-gradient(#f6d600, #f6d600) 
		  padding-box;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/conic-gradient.js