A Fun Slidey Switch CSS Checkbox Design

No other html elements required! 08 Apr 2025

logo
skypattern.jp Try out Browser-based pattern drafting software for clothing designers. Build custom patterns using mathematical formulas and geometric primitives. Make your free account now! 
/* just add this css to an <input type=checkbox />*/

.slideSwitchInput{
  cursor: pointer;
  background: none !important;
  appearance: none;
  outline: none;
  border: none;
  width: 40px;
  height: 24px;
  position: relative;
  &:before {
    display: block;
    background: white;
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    z-index: 100;
    transform: translate(2px, 2px);
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  &:checked:before {
    transform: translate(20px, 2px);
    background: pink;
  }
  &:after {
    display: block;
    background: pink;
    content: "";
    width: 42px;
    height: 24px;
    border-radius: 12px;
    position: absolute;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
  &:checked:after, &:active:after {
    background: deeppink;
  }
  &:checked:active:after {
    background: hotpink;
  }
  &:checked:hover:before {
    background: white;
  }
  &:hover:after {
    box-shadow: inset 0 0 10px 2px hotpink;
  }
  &:checked:hover:after {
    box-shadow: inset 0 0 10px 2px #0003;
  }
  &:focus, &:active, &:hover {
    outline: none;
  }
}

A Longer Variation 🤪

/* just add this css class in addition to the base one */

.longvariation {
  &:after {
    width: 202px;
  }
  &:checked:before {
    transform: translate(180px, 2px);
  }
}

More Variations: