स्काईरियम द्वारा एक कोड

अनुशंसित

13 January 2025

मेटेहन द्वारा एक कोड

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

स्काईरियम द्वारा एक कोड

अनुशंसित

mo832860 द्वारा एक कोड

मेटेहन द्वारा एक कोड

मेटेहन द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

mo832860 द्वारा एक कोड

मेटेहन द्वारा एक कोड

मेटेहन द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS