Ein Code von Skyrreum

Im Editor öffnen Veröffentlichen Sie Ihren Code Brauchen Sie eine Website?

Empfohlen

27 June 2025

Ein Code von smartfunction186

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

Tanzcode

Ein Code von Metehan

Ein Code von smartfunction186

HTML

CSS

JS

Empfohlen

Tanzcode

Ein Code von Metehan

Ein Code von smartfunction186

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS