Square Latching Toggle Button: Pure CSS Toggle Switch

Square Latching Toggle Button

A square keycap that latches like a hardware button. Press and it sinks, switch it on and it stays half down while a small LED lights in the accent color. Pure CSS on a checkbox.

Also known as: square toggle button, square toggle button css, keycap toggle button, latching push button css.

Color Size 24px Dark background

HTML

<label class="tgl-square-key-toggle">
  <input type="checkbox" role="switch" aria-label="Loop">
  <span class="tgl-square-key-toggle-cap" aria-hidden="true">
    <span class="tgl-square-key-toggle-led"></span>
    <svg viewBox="0 0 24 24"><path d="M17 2l4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="M7 22l-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></svg>
    <span class="tgl-square-key-toggle-label">Loop</span>
  </span>
</label>

CSS

.tgl-square-key-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, sans-serif;
  line-height: 1.2;
  padding-bottom: 0.3em;
}
.tgl-square-key-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-square-key-toggle-cap {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.3em;
  box-sizing: border-box;
  width: 4em;
  height: 4em;
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: 0.75em;
  background: linear-gradient(#fafafa, #e7e7ea);
  color: #3f3f46;
  box-shadow:
    inset 0 1px 0 #fff,
    0 0.28em 0 #c8c8ce,
    0 0.45em 0.7em -0.15em rgb(0 0 0 / 0.35);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tgl-square-key-toggle-led {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: #d4d4d8;
  box-shadow: inset 0 0.04em 0.06em rgb(0 0 0 / 0.25);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.tgl-square-key-toggle-cap svg {
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tgl-square-key-toggle-label {
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #71717a;
  transition: color 0.2s ease;
}
/* held down */
.tgl-square-key-toggle:active .tgl-square-key-toggle-cap {
  transform: translateY(0.24em);
  box-shadow: inset 0 1px 0 #fff, 0 0.04em 0 #c8c8ce, 0 0.1em 0.2em -0.05em rgb(0 0 0 / 0.3);
  transition-duration: 0.08s;
  transition-timing-function: ease-out;
}
/* latched on: half down, LED lit */
.tgl-square-key-toggle input:checked + .tgl-square-key-toggle-cap {
  transform: translateY(0.14em);
  box-shadow: inset 0 1px 0 #fff, 0 0.14em 0 #c8c8ce, 0 0.25em 0.45em -0.15em rgb(0 0 0 / 0.3);
  transition-duration: 0.12s;
  transition-timing-function: ease-out;
}
.tgl-square-key-toggle input:checked + .tgl-square-key-toggle-cap .tgl-square-key-toggle-led {
  background: var(--c);
  box-shadow: 0 0 0.12em var(--c), 0 0 0.5em var(--c);
  animation: tgl-square-key-toggle-flicker 0.4s steps(1, end);
}
.tgl-square-key-toggle input:checked + .tgl-square-key-toggle-cap .tgl-square-key-toggle-label {
  color: var(--c);
}
.tgl-square-key-toggle input:focus-visible + .tgl-square-key-toggle-cap {
  outline: 0.12em solid var(--c);
  outline-offset: 0.25em;
}
@keyframes tgl-square-key-toggle-flicker {
  0% { opacity: 0.3; }
  25% { opacity: 1; }
  45% { opacity: 0.5; }
  60% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tgl-square-key-toggle *,
  .tgl-square-key-toggle *::before,
  .tgl-square-key-toggle *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tgl-square-key-toggle, .tgl-square-key-toggle *, .tgl-square-key-toggle::before, .tgl-square-key-toggle::after, .tgl-square-key-toggle *::before, .tgl-square-key-toggle *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --tgl-color on the element or a parent. Currently previewing #3b82f6.
Size: set --tgl-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 24px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Square Latching Toggle Button

HTML

CSS

Customizing this snippet

Similar toggle switches