Toggle Glow

sachin007
Jan 26, 2026 2
Live Preview

Live Editor

<div class="neon-3d-container">
  <input type="checkbox" id="neon-toggle" class="neon-input">
  <label for="neon-toggle" class="neon-label">
    <span class="neon-switch"></span>
  </label>
</div>
:root {
  --bg-color: #1a1a1a;
  --neon-cyan: #00f3ff;
  --dark-shadow: #000000;
  --light-shadow: #2d2d2d;
}

body {
  background-color: var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

/* The Outer Frame (3D Hole) */
.neon-label {
  position: relative;
  width: 120px;
  height: 50px;
  background: #151515;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 5px;
  /* Inset shadow makes it look like it's carved into the wall */
  box-shadow: 
    inset 6px 6px 12px var(--dark-shadow),
    inset -6px -6px 12px var(--light-shadow);
}

/* The 3D Sliding Switch */
.neon-switch {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #222;
  border-radius: 50%;
  left: 10px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Outset shadow makes it look like it's popping out */
  box-shadow: 
    6px 6px 10px var(--dark-shadow),
    -2px -2px 10px var(--light-shadow);
}

/* Hidden Checkbox Logic */
.neon-input { display: none; }

/* Active State (ON) */
.neon-input:checked + .neon-label .neon-switch {
  left: 70px;
  background: var(--neon-cyan);
  /* The Neon Ignition */
  box-shadow: 
    0 0 10px var(--neon-cyan),
    0 0 30px var(--neon-cyan),
    0 0 60px var(--neon-cyan);
}

/* Glowing reflection on the frame when ON */
.neon-input:checked + .neon-label {
  box-shadow: 
    inset 0 0 15px rgba(0, 243, 255, 0.2),
    0 0 20px rgba(0, 243, 255, 0.1);
  border: 1px solid rgba(0, 243, 255, 0.3);
}

/* Subtle inner glow for the switch button */
.neon-switch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #333;
  border-radius: 50%;
  transition: 0.3s;
}

.neon-input:checked + .neon-label .neon-switch::after {
  background: #fff;
  box-shadow: 0 0 10px #fff;
}
Categories

Toggle Glow

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
