Minecraft स्विच

2072 Andev.web

अनुशंसित

5 November 2025

UI थीम स्विचर: हल्का, गहरा, मंद विकल्प

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 टॉगल स्विच कोड स्निपेट

पावर स्विच

UI थीम स्विचर: हल्का, गहरा, मंद विकल्प

HTML

CSS

JS

अनुशंसित

HTML टॉगल स्विच कोड स्निपेट

पावर स्विच

UI थीम स्विचर: हल्का, गहरा, मंद विकल्प

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS