Red Glow Mini Toggle

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="red-sw">
  <input type="checkbox" checked />
  <span class="red-tr"><span class="red-th"></span></span>
</label>

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

.red-sw {
  display: inline-block;
  cursor: pointer;
}
.red-sw input { display: none; }
.red-tr {
  display: block;
  width: 42px;
  height: 22px;
  background: #27272a;
  border-radius: 12px;
  padding: 2px;
  transition: background 0.3s, box-shadow 0.3s;
}
.red-th {
  display: block;
  width: 18px;
  height: 18px;
  background: #71717a;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
}
.red-sw input:checked + .red-tr {
  background: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}
.red-sw input:checked + .red-tr .red-th {
  transform: translateX(20px);
  background: #ffffff;
}