Skeuomorphic Dial Selector 0-5

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="dial-container"><input type="radio" name="dial382" id="d0" checked><input type="radio" name="dial382" id="d1"><input type="radio" name="dial382" id="d2"><input type="radio" name="dial382" id="d3"><input type="radio" name="dial382" id="d4"><input type="radio" name="dial382" id="d5"><div class="dial-body"><div class="dial-knob"><div class="dial-led"></div></div><label for="d0" class="lbl-off">OFF</label><label for="d1" class="lbl-1">1</label><label for="d2" class="lbl-2">2</label><label for="d3" class="lbl-3">3</label><label for="d4" class="lbl-4">4</label><label for="d5" class="lbl-5">5</label></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.dial-container { position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; font-family: system-ui; font-weight: 700; font-size: 10px; }
.dial-container input { display: none; }
.dial-body { position: relative; width: 100%; height: 100%; border-radius: 50%; background: #1c1d21; box-shadow: inset 2px 2px 5px #0e0f11, inset -2px -2px 5px #2a2b31; display: flex; align-items: center; justify-content: center; }
.dial-knob { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(145deg, #23252a, #17181c); box-shadow: 4px 4px 10px #0e0f11, -4px -4px 10px #2a2b31; position: relative; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.dial-led { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: #00ff88; box-shadow: 0 0 6px #00ff88; transition: opacity 0.3s; opacity: 0.2; }
.dial-body label { position: absolute; color: #4a505a; cursor: pointer; transition: 0.3s; }
.lbl-off { top: 12px; left: 50%; transform: translateX(-50%); }
.lbl-1 { top: 30px; right: 20px; }
.lbl-2 { bottom: 30px; right: 20px; }
.lbl-3 { bottom: 12px; left: 50%; transform: translateX(-50%); }
.lbl-4 { bottom: 30px; left: 20px; }
.lbl-5 { top: 30px; left: 20px; }
#d0:checked ~ .dial-body .dial-knob { transform: rotate(180deg); }
#d0:checked ~ .dial-body .lbl-off { color: #00ff88; text-shadow: 0 0 8px #00ff88; }
#d1:checked ~ .dial-body .dial-knob { transform: rotate(240deg); }
#d1:checked ~ .dial-body .lbl-1 { color: #00ff88; text-shadow: 0 0 8px #00ff88; }
#d2:checked ~ .dial-body .dial-knob { transform: rotate(300deg); }
#d2:checked ~ .dial-body .lbl-2 { color: #00ff88; text-shadow: 0 0 8px #00ff88; }
#d3:checked ~ .dial-body .dial-knob { transform: rotate(0deg); }
#d3:checked ~ .dial-body .lbl-3 { color: #00ff88; text-shadow: 0 0 8px #00ff88; }
#d4:checked ~ .dial-body .dial-knob { transform: rotate(60deg); }
#d4:checked ~ .dial-body .lbl-4 { color: #00ff88; text-shadow: 0 0 8px #00ff88; }
#d5:checked ~ .dial-body .dial-knob { transform: rotate(120deg); }
#d5:checked ~ .dial-body .lbl-5 { color: #00ff88; text-shadow: 0 0 8px #00ff88; }
#d0:not(:checked) ~ .dial-body .dial-led { opacity: 1; }