Pulsante interruttore luce scura.

1335 jhonnn

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Consigliato

28 January 2025

Pulsante al passaggio del mouse

8 February 2025

pulsante passante

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

Pulsante interruttore luce scura.

Consigliato

PULSANTE

Pulsante al passaggio del mouse

pulsante passante

HTML

CSS

JS

Consigliato

PULSANTE

Pulsante al passaggio del mouse

pulsante passante

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS