<main>
  <div class="switch">
    <input type="checkbox" id="switch">
    <label for="switch">Switch label</label>
  </div>
  <div class="switch">
    <input type="checkbox" id="switch-checked" checked>    
    <label for="switch-checked">Switch label</label>
  </div>
  <div class="switch">
    <input type="checkbox" id="switch-disabled" disabled>
    <label for="switch-disabled">Switch label</label>
  </div>
  <div class="switch">
    <input type="checkbox" id="switch-checked-disabled" checked disabled>
    <label for="switch-checked-disabled">Switch label</label>
  </div>
  
  <a href="https://remybeumier.be/blog/css-only-toggle-switch-button" target="_blank" class="header__logo">Read the related article</a>
</main>

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  font-family: Arial;
}

body {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  background-color: #0093e9;
  background-image: linear-gradient(-30deg, #0093e9 0%, #80d0c7 100%);
  min-height: 100vh;
}

main {
  padding: 2.5rem;
  background-color: rgba(256,256,256,1);
  display: inline-block;
  
  a {
    text-align: center;
    display: block;
    margin-top: 2em;
    color: #333;
    &:hover {
      color: #666;
    }
  }
}

.switch {
  input[type='checkbox'] {
    appearance: none;
    display: block;
    margin: 0;
  }

  label {
    display: block;
    height: 2.375rem;
    position: relative;
    cursor: pointer;
    padding: 0.625rem 0 0.625rem 4.5rem;
  }

  input[type='checkbox'] + label::before {
    content: 'No';
    text-align: right;
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
    color: #ffffff;
    display: block;
    height: 1.75rem;
    width: 3.75rem;
    border-radius: 9999px;
    position: absolute;
    top: calc(0.375rem - 1px);
    left: 0;
    background-color: #8f8f8f;
    box-shadow: 0 0 0 1px #e0e0e0;
    transition: all 0.3s cubic-bezier(0.72, 0.26, 0.26, 0.82), visibility 0s;
  }

  input[type='checkbox'] + label::after {
    content: '';
    display: block;
    height: 1.75rem;
    width: 1.75rem;
    border: solid 0.25rem #8f8f8f;
    border-radius: 9999px;
    position: absolute;
    top: calc(0.375rem - 1px);
    left: 0;
    background-color: #ffffff;
    transition: all 0.3s cubic-bezier(0.72, 0.26, 0.26, 0.82), visibility 0s;
  }

  input[type='checkbox']:checked + label::before {
    content: 'Yes';
    text-align: left;
    background-color: #008000;
  }

  input[type='checkbox']:checked + label::after {
    left: 2rem;
    border-color: #008000;
  }

  input[type='checkbox']:disabled + label {
    cursor: not-allowed;
    &::before {
      background-color: #f5f5f5;
      color: #e0e0e0;
    }
    &::after {
      background-color: #e0e0e0;
      border-color: #f5f5f5;
    }
  }

  input[type='checkbox']:checked:disabled + label {
    &::before {
      background-color: #f5f5f5;
      color: #707070;
    }
    &::after {
      background-color: #707070;
      border-color: #f5f5f5;
    }
  }

  input[type='checkbox']:focus + label::before,
  input[type='checkbox']:focus-visible + label::before {
    box-shadow: 0 0 0 4px #e0e0e0;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.