Um Código de Skyrreum

Abrir no Editor Publique Seu Código Precisa de um site?

Recomendado

5 June 2025

CodePen Home Cartões Móveis Esboçados

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

Um Código de Skyrreum

Recomendado

Um código por yuhhxn

Um código de Mete

CodePen Home Cartões Móveis Esboçados

HTML

CSS

JS

Recomendado

Um código por yuhhxn

Um código de Mete

CodePen Home Cartões Móveis Esboçados

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS