body {
  background: #555;
}
.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);
  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;
  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;
}
.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;
}

@keyframes spin {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(1845deg);
  }
}
.pin {
  transform: rotate(45deg);
  animation: spin infinite 10s linear;
}

.wheel {
  background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  filter: saturate(2);
}