Ying Yang Toggle

Open In Editor Video Publish Your Code

.toggle {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 20rem;
  height: 10rem;
  border-radius: 5rem;
  background: linear-gradient(0deg, #222, #222 50%, #fff 50%, #fff 100%);
  background-size: 18rem 100%;
  background-position: 1rem 0;
  background-repeat: no-repeat;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.5s ease;
}
.toggle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5rem;
  box-shadow: inset 0 0.1rem 0.4rem 0 black;
  outline: 1rem solid #6d8d9d;
  z-index: 1;
  transition: all 0.5s ease;
}
.toggle:hover:before {
  box-shadow: inset 0 0.1rem 0.6rem 0 black;
}
.toggle__black, .toggle__white {
  position: relative;
  height: 100%;
}
.toggle__black:before, .toggle__white:before {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.toggle__black {
  width: var(--first-half);
  background-color: #222;
  border-radius: 0 5rem 0 0;
  transition: all 0.5s ease;
}
.toggle__black:before {
  top: 25%;
  left: calc(50% - 1.5rem);
  width: 3rem;
  height: 3rem;
  background-color: #fff;
  transition: all 0.5s ease;
}
.toggle__white {
  width: calc(100% - var(--first-half));
  background-color: #fff;
  border-radius: 0 0 0 3rem;
  transition: all 0.5s ease;
}
.toggle__white:before {
  bottom: 25%;
  left: calc(50% - 0.75rem);
  width: 1.5rem;
  height: 1.5rem;
  background-color: #222;
  transition: all 0.5s ease;
}
.toggle--active {
  --first-half: 35%;
}
.toggle--active .toggle__black {
  border-radius: 0 3rem 0 0;
}
.toggle--active .toggle__black:before {
  left: calc(50% - 0.75rem);
  width: 1.5rem;
  height: 1.5rem;
}
.toggle--active .toggle__white {
  border-radius: 0 0 0 5rem;
}
.toggle--active .toggle__white:before {
  left: calc(50% - 1.5rem);
  width: 3rem;
  height: 3rem;
}

Ying Yang Toggle

Recommended

Minion Eye Toggle

frying egg loading

CSS Dark Mode Toggle

HTML

CSS

JS

Recommended

Minion Eye Toggle

frying egg loading

CSS Dark Mode Toggle

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS