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

अनुशंसित

26 October 2024

शुद्ध CSS3 स्टार वार्स लाइटसेबर चेकबॉक्स

HTML

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #e8e8e8;
  }
  .l {
    display: block;
    margin-bottom: 1.5em;
    font-size: 1em;
  }
  
  .l {
    background-color: rgba(0,0,0,0.7);
    border-radius: 0.75em;
    box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.3) inset;
    color: #fdea7b;
    display: inline-flex;
    align-items: center;
    margin: auto;
    padding: 0.15em;
    width: 3em;
    height: 1.5em;
    transition: background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  .l:before, .l:after {
    content: "";
    display: block;
  }
  
  .l:before {
    background-color: #d7d7d7;
    border-radius: 50%;
    width: 1.2em;
    height: 1.2em;
    transition: background-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
    z-index: 1;
  }
  
  .l:after {
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.15) 0) 0 50% / 50% 100%,
          repeating-linear-gradient(90deg,#bbb 0,#bbb,#bbb 20%,#999 20%,#999 40%) 0 50% / 50% 100%,
          radial-gradient(circle at 50% 50%,#888 25%, transparent 26%);
    background-repeat: no-repeat;
    border: 0.25em solid transparent;
    border-left: 0.4em solid #d8d8d8;
    border-right: 0 solid transparent;
    transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
    transform: translateX(-22.5%);
    transform-origin: 25% 50%;
    width: 1.2em;
    height: 1em;
    box-sizing: border-box;
  }
  .l:checked {
    background-color: rgba(0,0,0,0.45);
    box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.1) inset;
  }
  
  .l:checked:before {
    background-color: currentColor;
    transform: translateX(125%)
  }
  
  .l:checked:after {
    border-left-color: currentColor;
    transform: translateX(-2.5%) rotateY(180deg);
  }
  .l:focus {
    outline: 0;
  }

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

अनुशंसित

डार्क लाइट स्विच बटन.

पासवर्ड इनपुट लाइट

शुद्ध CSS3 स्टार वार्स लाइटसेबर चेकबॉक्स

HTML

CSS

JS

अनुशंसित

डार्क लाइट स्विच बटन.

पासवर्ड इनपुट लाइट

शुद्ध CSS3 स्टार वार्स लाइटसेबर चेकबॉक्स

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS