Morphing Glow Toggle Switch

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="glow-switch"><input type="checkbox" checked><span class="switch-slider"></span></label>

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

.glow-switch { position: relative; width: 50px; height: 26px; display: inline-block; }
.glow-switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; inset: 0; background: #27272a; border-radius: 20px; cursor: pointer; transition: 0.4s; border: 1px solid #3f3f46; }
.switch-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #a1a1aa; border-radius: 50%; transition: 0.4s; }
.glow-switch input:checked + .switch-slider { background: #10b981; border-color: #10b981; box-shadow: 0 0 10px rgba(16,185,129,0.5); }
.glow-switch input:checked + .switch-slider::before { transform: translateX(24px); background: #fff; }