Toggle Grow by admin

0 Add to Favorites

HTML Code
CSS Code

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  min-height: 100vh;
  background: #2CA361;
  font-size: 3rem;
  gap: 0.25em;
}
.toggle {
  --color: #d32c2c; #f05;
  --bg: #fff;
  appearance: none;
  position: relative;
  font-size: 1em;
  width: 3em;
  aspect-ratio: 2.5;
  border: 0.1em solid var(--bg);
  background: var(--color);
  border-radius: 0.35em;
  box-shadow:
    inset 0 0 var(--bg),
    inset -1.3em 0 var(--bg);
  transition: box-shadow 0.5s, background 0.5s;
  transition-delay: 0.275s, 0s;
/*   transition-timing-function: linear; */
  
  &::before {
    content: "";
    position: absolute;
    width: 1.5em;
    height: 100%;
    background: var(--color);
    border-radius: 0.25em;
    border: 1px solid #0000;
    left: 0;
    transition: left 0.5s, background 0.5s;
/*     transition-timing-function: linear; */
    box-sizing: border-box;
  }
  
  &::after {
    content: "";
    position: absolute;
    width: 0.6em;
    height: 0.6em;
    border-radius: 100vmax;
    background: radial-gradient(#0000 calc(100% - 0.2em), #fff calc(99.9% - 0.2em) 99.9%, #0000);
    top: 50%;
    left: 26.5%;
    transform: translate(-50%, -50%);
    transition: left 0.5s, width 0.5s;
    transition-delay: 0.175s, 0.75s;
  }
  
  &:checked {
    --color: #2CA361;
    box-shadow:
      inset 1.3em 0 var(--bg),
      inset -0 0 var(--bg);
    
    &::before {
      left: 1.3em;
    }
    
    &::after {
      left: 73.5%;
      width: 0.125em;
    }
  }
  
  &[disabled] {
    &, &:checked {
      --color: #a4a4a4;
    }
  }
}

@media print {
  .toggle {
    &, &::before, &::after {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }
}

@media (prefers-reduced-motion) {
  .toggle {
    &, &::before, &::after {
      transition: none !important;
      animation: none !important;
    }
  }
}

@media (prefers-color-scheme: dark) {
  .toggle {
    --bg: #222;
  }
}

Uploaded: 12th July 2024

Tags: #green, #red, #toggle, #switch, #grow

CSSPortal

( admin )

We share content found online. We don't claim credit of anything posted here. If you see your work, let us know and we can move it to your account.

•Website•X (Twitter)

CSS Properties Used

There are 28 CSS properties used in the above example. Click to view and learn about each property.

display flex-direction align-items justify-content overflow margin min-height background font-size gap appearance position width aspect-ratio border border-radius box-shadow transition transition-delay transition-timing-function content height left box-sizing top transform print-color-adjust animation