.button {
  position: absolute;
  top: 20px;
  left: calc(50% - 90px);
  display: block;
  width: 180px;
  height: 230px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#464A54), to(#2C2225));
  background-image: linear-gradient(to bottom, #464A54 0%, #2C2225 100%);
  border-radius: 6px;
  cursor: pointer;
  -webkit-box-shadow: 0 -5px 0px #464649, 0 4px 20px rgba(0, 0, 0, 0.5), 0 2px 1px #66696E inset, 4px 0 0 rgba(0, 0, 0, 0.1) inset, -4px 0 0 rgba(0, 0, 0, 0.1) inset, 0 -8px 2px rgba(0, 0, 0, 0.1) inset;
          box-shadow: 0 -5px 0px #464649, 0 4px 20px rgba(0, 0, 0, 0.5), 0 2px 1px #66696E inset, 4px 0 0 rgba(0, 0, 0, 0.1) inset, -4px 0 0 rgba(0, 0, 0, 0.1) inset, 0 -8px 2px rgba(0, 0, 0, 0.1) inset;
}
.button .hole {
  position: absolute;
  top: 20px;
  left: 20px;
  display: block;
  width: 140px;
  height: 186px;
  overflow: hidden;
  background-color: #090909;
  border-radius: 8px;
  -webkit-box-shadow: 0 -2px 1px rgba(255, 255, 255, 0.25) inset, 0 2px 1px rgba(255, 255, 255, 0.2) inset;
          box-shadow: 0 -2px 1px rgba(255, 255, 255, 0.25) inset, 0 2px 1px rgba(255, 255, 255, 0.2) inset;
}
.button .switch {
  position: absolute;
  top: 6px;
  left: 4px;
  display: block;
  width: 132px;
  height: 174px;
  background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), -webkit-gradient(linear, left top, left bottom, from(#882626), to(#290606));
  background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), linear-gradient(to bottom, #882626 0%, #290606 100%);
  background-size: 100% 80px, 100% 80px, 10px 10px, 100%;
  background-position: top left, bottom left, bottom left, center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  border-radius: 8px;
  -webkit-box-shadow: 2px 0 1px rgba(255, 255, 255, 0.1) inset, -2px 0 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 2px rgba(255, 255, 255, 0.05) inset, 0 4px 2px rgba(0, 0, 0, 0.05) inset, 0 -30px 8px rgba(198, 45, 45, 0.5), 0 -25px 8px rgba(198, 45, 45, 0.3), 0 -20px 8px rgba(198, 45, 45, 0.4), 0 -15px 8px rgba(198, 45, 45, 0.5), 0 -10px 8px rgba(198, 45, 45, 0.6), 0 -5px 8px rgba(198, 45, 45, 0.9);
          box-shadow: 2px 0 1px rgba(255, 255, 255, 0.1) inset, -2px 0 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 2px rgba(255, 255, 255, 0.05) inset, 0 4px 2px rgba(0, 0, 0, 0.05) inset, 0 -30px 8px rgba(198, 45, 45, 0.5), 0 -25px 8px rgba(198, 45, 45, 0.3), 0 -20px 8px rgba(198, 45, 45, 0.4), 0 -15px 8px rgba(198, 45, 45, 0.5), 0 -10px 8px rgba(198, 45, 45, 0.6), 0 -5px 8px rgba(198, 45, 45, 0.9);
  -webkit-transform-style: preserve3d;
          transform-style: preserve3d;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: perspective(1500px) rotateX(-30deg) translateY(16px);
          transform: perspective(1500px) rotateX(-30deg) translateY(16px);
  -webkit-transition: -webkit-transform 200ms ease;
  transition: -webkit-transform 200ms ease;
  transition: transform 200ms ease;
  transition: transform 200ms ease, -webkit-transform 200ms ease;
}
.button .switch:before {
  content: "";
  position: absolute;
  top: -2px;
  left: 5px;
  width: 122px;
  height: 5px;
  background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, transparent 80%);
}
.button .switch .one {
  position: absolute;
  top: 24px;
  left: calc(47%);
  display: block;
  width: 6px;
  height: 40px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
  background-image: linear-gradient(to bottom, #ccc 0%, #999 100%);
  -webkit-box-shadow: 0 2px 1px white inset;
          box-shadow: 0 2px 1px white inset;
  border-radius: 4px;
}
.button .switch .zero {
  position: absolute;
  bottom: 24px;
  left: calc(36%);
  display: block;
  width: 32px;
  height: 40px;
  -webkit-box-shadow: 0 4px 2px rgba(255, 255, 255, 0.5) inset, 0 -4px 2px rgba(0, 0, 0, 0.2) inset, 0 0 0 6px #666 inset;
          box-shadow: 0 4px 2px rgba(255, 255, 255, 0.5) inset, 0 -4px 2px rgba(0, 0, 0, 0.2) inset, 0 0 0 6px #666 inset;
  border-radius: 50%;
}
.button input {
  display: none;
}
.button input:checked ~ .hole .switch {
  background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(254, 244, 0, 0.5) 0%, rgba(254, 244, 0, 0.2) 30%, rgba(254, 244, 0, 0.1) 50%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 30%, transparent 50%), -webkit-gradient(linear, left top, left bottom, from(#B43222), to(#A51810));
  background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(254, 244, 0, 0.5) 0%, rgba(254, 244, 0, 0.2) 30%, rgba(254, 244, 0, 0.1) 50%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 30%, transparent 50%), linear-gradient(to bottom, #B43222 0%, #A51810 100%);
  background-size: 100% 80px, 100% 80px, 100% 180px, 10px 10px, 100%;
  background-position: top left, bottom left, 0 30px, bottom left, center;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  border-radius: 8px;
  -webkit-box-shadow: 4px 0 1px rgba(255, 255, 255, 0.15) inset, -4px 0 1px rgba(255, 255, 255, 0.15) inset, 0 4px 1px rgba(255, 255, 255, 0.15) inset, 0 -12px 8px rgba(0, 0, 0, 0.25) inset, 0 30px 8px rgba(128, 17, 5, 0.5), 0 25px 8px rgba(128, 17, 5, 0.3), 0 20px 8px rgba(128, 17, 5, 0.4), 0 15px 8px rgba(128, 17, 5, 0.5), 0 10px 8px rgba(128, 17, 5, 0.6), 0 5px 8px rgba(128, 17, 5, 0.9);
          box-shadow: 4px 0 1px rgba(255, 255, 255, 0.15) inset, -4px 0 1px rgba(255, 255, 255, 0.15) inset, 0 4px 1px rgba(255, 255, 255, 0.15) inset, 0 -12px 8px rgba(0, 0, 0, 0.25) inset, 0 30px 8px rgba(128, 17, 5, 0.5), 0 25px 8px rgba(128, 17, 5, 0.3), 0 20px 8px rgba(128, 17, 5, 0.4), 0 15px 8px rgba(128, 17, 5, 0.5), 0 10px 8px rgba(128, 17, 5, 0.6), 0 5px 8px rgba(128, 17, 5, 0.9);
  -webkit-transform: perspective(1500px) rotateX(30deg) translateY(-16px);
          transform: perspective(1500px) rotateX(30deg) translateY(-16px);
}
.button input:checked ~ .hole .switch:before {
  top: auto;
  bottom: -2px;
}
.button input:checked ~ .hole .switch:after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: calc(14%);
  width: 96px;
  height: 16px;
  border-radius: 50%;
  background-image: radial-gradient(ellipse at center, #FEF400 0%, rgba(254, 244, 0, 0.3) 60%, transparent 100%);
  -webkit-filter: blur(8px);
          filter: blur(8px);
}
.button input:checked ~ .hole .switch .one {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
  background-image: linear-gradient(to bottom, #eee 0%, #aaa 100%);
}
.button input:checked ~ .hole .switch .zero {
  -webkit-box-shadow: 0 4px 2px rgba(255, 255, 255, 0.5) inset, 0 -4px 2px rgba(0, 0, 0, 0.2) inset, 0 0 0 6px #aaa inset;
          box-shadow: 0 4px 2px rgba(255, 255, 255, 0.5) inset, 0 -4px 2px rgba(0, 0, 0, 0.2) inset, 0 0 0 6px #aaa inset;
}
body {
  background-color: #2B2B2B;
}