Ein Code von Skyrreum

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

22 April 2025

Ein Code von ashimadison8

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

Ein Code von Skyrreum

Empfohlen

Ein Code von andres.stahr

EINFACHE ZÄHLUNG

Ein Code von ashimadison8

HTML

CSS

JS

Empfohlen

Ein Code von andres.stahr

EINFACHE ZÄHLUNG

Ein Code von ashimadison8

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS