Minecraft स्विच

1559 Andev.web

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

25 July 2025

लोकलस्टोरेज के साथ डार्क मोड थीम स्विचर

21 June 2024

लाइट बल्ब स्विच

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andev Web</title>
    <link rel="stylesheet" href="style.css">
</head>

</html>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #212121;
  }
.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 4em;
    height: 2em;
  }
  
  .switch input {
    opacity: 1;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
  }
  
  .off {
    position: absolute;
    content: "";
    height: 2em;
    width: 2em;
    background-color: white;
    transition: .4s;
    image-rendering: pixelated;
    opacity: 1;
  }
  
  .on {
    position: absolute;
    content: "";
    height: 2em;
    width: 2em;
    background-color: white;
    transition: .4s;
    image-rendering: pixelated;
    opacity: 0;
  }
  
  .switch input:checked + .slider {
    background-color: #ccc;
  }
  
  .switch input:focus + .slider {
    box-shadow: 0 0 1px #ccc;
  }
  
  .switch input:checked ~ .off {
    transform: translateX(2em);
  }
  
  .switch input:checked ~ .on {
    transform: translateX(2em);
    opacity: 1;
  }

Minecraft स्विच

अनुशंसित

लोकलस्टोरेज के साथ डार्क मोड थीम स्विचर

निऑन टॉगल स्विच

लाइट बल्ब स्विच

HTML

CSS

JS

अनुशंसित

लोकलस्टोरेज के साथ डार्क मोड थीम स्विचर

निऑन टॉगल स्विच

लाइट बल्ब स्विच

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS