Soft Ios Toggle Switch

In this example below you will see how to do a Soft Ios Toggle Switch with some HTML / CSS and Javascript

Soft Ios Toggle Switch

Thumbnail
This awesome code was written by Peter Bork, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Peter Bork ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Soft Ios Toggle Switch</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <input type="checkbox" />
<input type="checkbox" checked/>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/bork/soft-ios-toggle-switch-yHJbv */
body{
  background: #e1dfdb;
  text-align: center;
}
input{
  display: block;
  margin: 50px auto;
}
a:link{
  color: #333;
  font-family: calibri;
  display: block;
  text-decoration: none;
}
a:visited{
  color: #333;
}
a:hover{
  text-decoration: underline;
}

input[type="checkbox"]{
    width: 60px;
    height: 23px;
    position: relative;
    visibility: hidden;
    cursor: pointer;
}
input[type="checkbox"]:before{
    visibility: visible;
    -webkit-transition: all 0.5s;
    position: relative;
    display: block;
    width: 60px;
    height: 20px;
    border: 1px solid #E4E4E4;
    border-radius: 50px;
    content: "";
    background: #F0F0F0;

}
input[type="checkbox"]:after{
    visibility: visible;
    -webkit-transition: all 0.5s;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 30px;
    height: 20px;
    border: 2px solid #D8D8D8;
    border-radius: 50px;
    content: "";
    background: #EBEBEB;


}

input[type="checkbox"]:checked:before{
    position: absolute;
    display: block;
    width: 60px;
    height: 20px;
    border: 1px solid #E4E4E4;
    border-radius: 50px;
    content: "";
    background: #40c6bc;
}
input[type="checkbox"]:checked:after{
    -webkit-transition: all 0.5s;
    position: absolute;
    top: 0px;
    left: 33px;
    display: block;
    width: 30px;
    height: 20px;
    border: 2px solid #D8D8D8;
    border-radius: 50px;
    content: "";
    background: #EBEBEB;
}

Comments