My toggle switch with 'realistic' animations

Tutorials of (My toggle switch with 'realistic' animations) by Skittles

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>My toggle switch with 'realistic' animations</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  background-color: #777;
  height: 100%;
}

.on, .off {
  margin-top: 1em;
  width: 5em;
  height: 2em;
  background-color: #ff6666;
  border: inset #aaa;
  border-radius: 2em;
}
.on:after, .on:before, .off:after, .off:before {
  position: relative;
  content: "";
  display: block;
  width: 1.6em;
  height: 1.6em;
  border-radius: 2em;
  transition-duration: .5s;
  background-color: #ddd;
  border: inset #ddd;
}
.on:before, .off:before {
  content: "";
  display: block;
  position: relative;
  float: left;
  width: 1.6em;
  height: 1.6em;
  border: inset #00e600;
  background-color: #00e600;
  border-radius: 1em;
  transition-duration: .5s;
}

.on:after {
  margin-left: 3em;
  transform: rotate(180deg);
}

.on:before {
  width: 90%;
}

.container {
  postion: fixed;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0;
  height: 0;
}

#togglebig {
  font-size: 2em;
}
#togglebig:before {
  height: 90%;
}
#togglebig:after {
  height: 1.8em;
  width: 1.8em;
}

#togglesmall {
  font-size: .8em;
}
#togglesmall:before {
  height: 83%;
}
#togglesmall:after {
  height: 1.7em;
  width: 1.7em;
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  
<div class="container">
  <div class="off" id="togglesmall"></div>
  <div class="off" id="toggle"></div>
  <div class="off" id="togglebig"></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  background-color: #777;
  height: 100%;
}

.on, .off {
  margin-top: 1em;
  width: 5em;
  height: 2em;
  background-color: #ff6666;
  border: inset #aaa;
  border-radius: 2em;
}
.on:after, .on:before, .off:after, .off:before {
  position: relative;
  content: "";
  display: block;
  width: 1.6em;
  height: 1.6em;
  border-radius: 2em;
  transition-duration: .5s;
  background-color: #ddd;
  border: inset #ddd;
}
.on:before, .off:before {
  content: "";
  display: block;
  position: relative;
  float: left;
  width: 1.6em;
  height: 1.6em;
  border: inset #00e600;
  background-color: #00e600;
  border-radius: 1em;
  transition-duration: .5s;
}

.on:after {
  margin-left: 3em;
  transform: rotate(180deg);
}

.on:before {
  width: 90%;
}

.container {
  postion: fixed;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0;
  height: 0;
}

#togglebig {
  font-size: 2em;
}
#togglebig:before {
  height: 90%;
}
#togglebig:after {
  height: 1.8em;
  width: 1.8em;
}

#togglesmall {
  font-size: .8em;
}
#togglesmall:before {
  height: 83%;
}
#togglesmall:after {
  height: 1.7em;
  width: 1.7em;
}
/* Downloaded from https://www.codeseek.co/ */
$("div[id^='toggle']").on("click", function() {
  if(this.className === "on")
    this.className="off";
  
  else if(this.className === "off")
    this.className="on";
});

This awesome code ( My toggle switch with 'realistic' animations ) is write by skittles, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © skittles