Pure Css iOS Toggle Button

index.html

<h1>Pure Css iOS Toggle</h1>

<h2>Active</h2>
<div class="toggleWrapper">
  <input type="checkbox" name="toggle1" class="mobileToggle" id="toggle1" checked>
  <label for="toggle1"></label>
</div>

<h2>Inactive</h2>
<div class="toggleWrapper">
  <input type="checkbox" name="toggle2" class="mobileToggle" id="toggle2">
  <label for="toggle2"></label>
</div>

pure-css-ios-toggle-button.markdown

Pure Css iOS Toggle Button

Simulate iOS toggle button with html and less

www.pixelpshr.com

A Pen by Álvaro on CodePen.

License.

script.js

// no js required

style.less

// Layout only!
body {
  background: @background;
  h1 {
    text-align: center;
    color: gray;
  }
  h2 {
    text-align: center;
    color: gray;
  }
}

// Starts Here!

// Color Variables
@green: #2ecc71;
@lightgray: lightgray;
@background: whitesmoke;

.inactiveMixin {
  content: "";
  position: absolute;
  display: block;
}

.beforeAnimation {
  -moz-transition: .2s cubic-bezier(.24, 0, .5, 1);
  -o-transition: .2s cubic-bezier(.24, 0, .5, 1);
  -webkit-transition: .2s cubic-bezier(.24, 0, .5, 1);
  transition: .2s cubic-bezier(.24, 0, .5, 1);
}

.afterAnimation {
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, .04), 0 4px 9px hsla(0, 0%, 0%, .13), 0 3px 3px hsla(0, 0%, 0%, .05);
  -moz-transition: .35s cubic-bezier(.54, 1.60, .5, 1);
  -o-transition: .35s cubic-bezier(.54, 1.60, .5, 1);
  -webkit-transition: .35s cubic-bezier(.54, 1.60, .5, 1);
  transition: .35s cubic-bezier(.54, 1.60, .5, 1);
}

// Mobile Toggle Switch
.toggleWrapper {
  margin: auto;
  padding: 20px;
  width: 55px;
  border: 1px solid @lightgray;
  margin-top: 20px;
  border-radius: 5px;
  background: white;
  input {
    &.mobileToggle {
      opacity: 0; // hides checkbox
      position: absolute;
      & + label {
        position: relative;
        display: inline-block;
        user-select: none;
        -moz-transition: .4s ease;
        -o-transition: .4s ease;
        -webkit-transition: .4s ease;
        transition: .4s ease;
        -webkit-tap-highlight-color: transparent;
        height: 30px;
        width: 50px;
        border: 1px solid #e4e4e4;
        border-radius: 60px;
        &:before {
          .inactiveMixin;
          .beforeAnimation;
          height: 30px;
          width: 51px;
          top: 0;
          left: 0;
          border-radius: 30px;
        }
        &:after {
          .inactiveMixin;
          .afterAnimation;
          background: @background;
          height: 28px;
          width: 28px;
          top: 1px;
          left: 0px;
          border-radius: 60px;
        }
      }
      // When Active
      &:checked {
        & + label:before {
          background: @green; // Active Color
          -moz-transition: width .2s cubic-bezier(0, 0, 0, .1);
          -o-transition: width .2s cubic-bezier(0, 0, 0, .1);
          -webkit-transition: width .2s cubic-bezier(0, 0, 0, .1);
          transition: width .2s cubic-bezier(0, 0, 0, .1);
        }
        & + label:after {
          left: 54px - 30px;
        }
      }
    }
  }
}