Un código de Skyrreum

299 Skyrreum

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

26 December 2024

Un código de efficientcloud646

14 December 2024

Un código de creativefunction509

26 June 2024

Formulario de registro/registro con doble control deslizante

HTML

CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  background-color: #212121;
  transition: background-color 0.5s ease;
}

.container {
  margin: auto;
  color: hsl(0, 0%, 30%);
  font-weight: 900;
  font-size: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.toggle {
  width: 60px;
  height: 130px;
  background-color: hsl(0, 0%, 80%);
  border-radius: 1.7rem;
  padding: .25rem 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  transition: background-color 300ms 300ms;
}

.toggle__circle {
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: 4px solid hsl(0, 0%, 100%);
  border-radius: 50%;
  margin-top: calc(130px - (.25rem * 2) - 50px);
  transition: margin 500ms ease-in-out, background-color 300ms ease-in-out;
}

#check:checked + .toggle > .toggle__circle {
  margin-top: 0;
}

#check:checked + .toggle {
  background-color: #079c00;
}

:not(#check:checked) + .toggle {
  background-color: #d11002;
}

.toggle-text {
  display: flex;
  flex-direction: column;
  line-height: .8;
}

Recomendado

Un código de efficientcloud646

Un código de creativefunction509

Formulario de registro/registro con doble control deslizante

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS