Beautiful skeuomorphism toggle with toggle animation using HTML CSS & SASS. Skeuomorphism is a design technique that takes cues from the physical world and uses them in digital interfaces.

material ui neumorphism, bootstrap neomorphism ui design css framework, neumorphism html css, neumorphism website, neumorphism buttons, skeuomorphic button css library

How to make use of it:

1. HTML code for the skeuomorphism toggle switch.

<label class="skeuo__switch">
  <input type="checkbox" class="skeuo__input">
  <div class="skeuo__rail">
    <span class="skeuo__circle"></span>
  </div>
  <span class="skeuo__indicator"></span>
</label>

2. Main CSS Styles.

:root {
  /* override the variables here */
  --indicator-color: hsl(104, 94%, 50%);
  --body-color: hsl(233, 12%, 14%);
  --container-color: hsl(233, 12%, 20%);
  --container-color-light: hsl(233, 12%, 26%);
}

.skeuo__switch {
  height: 80px;
  background-color: var(--container-color);
  padding: 0 1.5rem;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.skeuo__input {
  display: none;
}

.skeuo__rail {
  position: relative;
  width: 88px;
  height: 28px;
  background-color: var(--container-color-light);
  border-radius: 3rem;
}

.skeuo__circle {
  display: block;
  width: 36px;
  height: 36px;
  background: radial-gradient(circle at 33%, #d7d8da 0%, #5d5e65 50%, rgba(255, 255, 255, 0) 100%);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  transition: transform .4s;
}

.skeuo__indicator {
  width: 12px;
  height: 12px;
  background-color: var(--container-color-light);
  border-radius: 50%;
  margin-left: 1.5rem;
  transition: .4s;
}

3. CSS code for toggle animation effects.

.skeuo__input:checked ~ .skeuo__rail .skeuo__circle {
  transform: translate(52px, -50%);
}

.skeuo__input:checked ~ .skeuo__indicator {
  background-color: var(--indicator-color);
}

Skeuomorphism-style Toggle Switch Plugin/Github

See Demo And Download

Official Website(bedimcode): Click Here

This superior jQuery/javascript plugin is developed by bedimcode. For extra Advanced usage, please go to the official website.