.button {
  margin: 30px auto 0;
  width: 13em;
  height: 13em;
  border-radius: 3em;
  position: relative;
  background-image: linear-gradient(to bottom, #dddddd, #d5d5d5);
  box-shadow: inset 0 3px 7px 0px #FFF, inset 0 -5px 5px 0px rgba(0, 0, 0, 0.2), 0 27px 51px -10px rgba(0, 0, 0, 0.5);
}
.button:before, .button:after {
  box-sizing: border-box;
  display: block;
}
.button:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 6.25em);
  top: calc(50% - 6.25em);
  width: 12.5em;
  height: 12.5em;
  background-image: linear-gradient(to bottom, #ffffff, #aaaaaa);
  -webkit-filter: blur(4px);
}
.button:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 5.5em);
  top: calc(50% - 5.5em);
  width: 11em;
  height: 11em;
  background-image: linear-gradient(to bottom, #c5c5c5, #dddddd 80%);
  box-shadow: 0 4px 28px -10px rgba(0, 0, 0, 0.2);
}

.wheel, .colors, .color {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 4.75em);
  top: calc(50% - 4.75em);
  width: 9.5em;
  height: 9.5em;
}

.wheel {
  display: block;
  z-index: 1;
  box-shadow: inset 0 16px 32px 14px rgba(0, 0, 0, 0.7);
}

.colors {
  list-style: none;
  background: #ddd;
  position: relative;
  -webkit-filter: blur(10px);
  transform: rotate(170deg) scaleX(-1);
}

.color {
  clip: rect(0px, 9.5em, 9.5em, 4.75em);
}
.color:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 4.75em);
  top: calc(50% - 4.75em);
  width: 9.5em;
  height: 9.5em;
  clip: rect(0px, 4.75em, 9.5em, 0px);
}

.color:nth-child(1):after {
  background-color: #9ED110;
  z-index: 12;
  transform: rotate(30deg);
}

.color:nth-child(2):after {
  background-color: #50B517;
  z-index: 11;
  transform: rotate(60deg);
}

.color:nth-child(3):after {
  background-color: #179067;
  z-index: 10;
  transform: rotate(90deg);
}

.color:nth-child(4):after {
  background-color: #476EAF;
  z-index: 9;
  transform: rotate(120deg);
}

.color:nth-child(5):after {
  background-color: #9f49ac;
  z-index: 8;
  transform: rotate(150deg);
}

.color:nth-child(6):after {
  background-color: #CC42A2;
  z-index: 7;
  transform: rotate(180deg);
}

.color:nth-child(7):after {
  background-color: #FF3BA7;
  z-index: 6;
  transform: rotate(180deg);
}

.color:nth-child(8):after {
  background-color: #FF5800;
  z-index: 5;
  transform: rotate(210deg);
}

.color:nth-child(9):after {
  background-color: #FF8100;
  z-index: 4;
  transform: rotate(240deg);
}

.color:nth-child(10):after {
  background-color: #FEAC00;
  z-index: 3;
  transform: rotate(270deg);
}

.color:nth-child(11):after {
  background-color: #FFCC00;
  z-index: 2;
  transform: rotate(300deg);
}

.color:nth-child(12):after {
  background-color: #EDE604;
  z-index: 1;
  transform: rotate(330deg);
}

.color:nth-child(n+7) {
  transform: rotate(180deg);
}

.center {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 3.15em);
  top: calc(50% - 3.15em);
  width: 6.3em;
  height: 6.3em;
  z-index: 2;
  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
  box-shadow: inset 0 3px 7px 0px #FFF, 0 25px 30px -5px rgba(0, 0, 0, 0.5);
}
.center:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 2.1em);
  top: calc(50% - 2.1em);
  width: 4.2em;
  height: 4.2em;
  background-image: linear-gradient(to bottom, #ffffff 20%, #aaaaaa);
  box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.5);
}
.center:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 1.5em);
  top: calc(50% - 1.5em);
  width: 3em;
  height: 3em;
  background-image: linear-gradient(to bottom, #aaaaaa, #f5f5f5 80%);
  box-shadow: inset 0 -1px 4px 0px #FFF;
}

.pin {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 2.75em);
  top: calc(50% - 2.75em);
  width: 5.5em;
  height: 5.5em;
  z-index: -1;
  -webkit-animation: spin infinite 4s linear;
}
.pin:after {
  content: "";
  width: 40px;
  height: 40px;
  transform: rotate(10deg) skew(40deg, 20deg);
  box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.1), 0 0 15px 3px rgba(0, 0, 0, 0.2);
  background: #FFF;
  position: absolute;
  z-index: -1;
  left: 6px;
  top: 10px;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
body {
  background: #555;
}