Ying Yang Toggle

Open In Editor 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

frying egg loading

Toggle Sidebar Navigation

Minion Eye Toggle

HTML

CSS

JS

Recommended

frying egg loading

Toggle Sidebar Navigation

Minion Eye Toggle

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS