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

Emoji Toggle

HTML Login Form with Password Toggle

Recording Toggle

HTML

CSS

JS

Recommended

Emoji Toggle

HTML Login Form with Password Toggle

Recording Toggle

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS