• 2019-11-23

    Perfect toggle switch

    Comments

    Start a discussion

    There are many toggle switches out there built with pure CSS but often they are really fancy with animations and a long code. I made a minimal "perfect" toggle switch with just the basics.

    HTML

    <label for="switch">
      <input type="checkbox" id="switch">
      <div></div>
    </label>

    CSS

    label {
      background: #ddd;
      display: inline-flex;
      width: 4rem;
      height: 2rem;
      border-radius: 100vh;
    }
    
    input {
      display: none;
    }
    
    label div {
      width: calc(50% - 8px);
      background: #0056de;
      border-radius: 100vh;
      margin: 4px;
    }
    
    input:checked + div {
      margin-left: auto;
    }

    Sources