Bascule Ying Yang

2,545 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

21 June 2024

Bascule dentée

16 November 2024

Basculer la barre latérale

18 May 2024

Bascule Emoji

HTML

CSS

:root {
  --first-half: 65%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 0;
  background-color: #6d8d9d;
  overflow: hidden;
}

.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;
}