Botão de interruptor de luz escura.

2225 jhonnn

Abrir no Editor Video Publique Seu Código

Recomendado

28 August 2025

Exemplo de código HTML da página de login em turco

23 August 2025

Blog de Engenharia: IA, Nuvem, Segurança Cibernética e Mais

12 December 2025

Demonstração de jogo de luta com bonecos de pano (HTML, CSS, JS)

HTML

CSS

/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: background-color 0.5s, color 0.5s;
}

/* Light and Dark colors */
:root {
  --light-bg: #f3f4f6;
  --light-text: #1a1a1a;
  --dark-bg: #1a1a1a;
  --dark-text: #f3f4f6;
}

/* Light Mode as default */
body {
  background-color: var(--light-bg);
  color: var(--light-text);
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Container for styling */
.container {
  text-align: center;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 60px;
  height: 30px;
  margin: 20px auto;
}

/* Hide the default checkbox */
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider with border */
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.4s;
  border: 2px solid #aaa; /* Add border here */
}

/* Circle inside slider */
.slider::before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.4s;
  border: 1px solid #ddd; /* Border around the inner circle */
}

/* Checked state */
input:checked + .slider {
  background-color: #4f46e5;
  border-color: #4f46e5;
}

input:checked + .slider::before {
  transform: translateX(30px);
}

body.dark-mode {
  background-color: var(--dark-bg);
  color: var(--dark-text);
}

Recomendado

Exemplo de código HTML da página de login em turco

Blog de Engenharia: IA, Nuvem, Segurança Cibernética e Mais

Demonstração de jogo de luta com bonecos de pano (HTML, CSS, JS)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS