daily pastebin goal
22%
SHARE
TWEET

Toggle switch button

a guest May 27th, 2018 77 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //TOGGLE SWITCH BUTTON
  2. <div class=a>
  3. <div class="toggle" id>
  4.   <label class="switch">
  5.     <input type="checkbox" id="checkbox">
  6.     <span class="slider round"></span>
  7.   </label>
  8. </div>
  9. <div class="ball" id="ball"></div>
  10. //IF CSS WONT WORK TAKE <STYLE></STYLE> OUTSIDE DIV!
  11. <style>
  12. .a {
  13.   position:absolute;
  14.   top:0;left:0;right:0;bottom:0;
  15.   justify-content:center;
  16.   display: flex;
  17.   align-items: center;
  18.   padding-bottom: 50px;
  19.   background-color: #dfe6e9;
  20. }
  21.  
  22. .switch {
  23.   position: relative;
  24.   display: inline-block;
  25.   height: 34px;
  26.   width: 60px;
  27. }
  28.  
  29. .switch input {display: none;}
  30.  
  31. .slider {
  32.   position: absolute;
  33.   cursor: pointer;
  34.   top: 0;left: 0;right: 0;bottom: 0;
  35.   background-color: #fc5c65;
  36.   -webkit- transition: .6s;
  37.   transition: .6s;
  38. }
  39.  
  40. .slider:before {
  41.   position: absolute;
  42.   content: "";
  43.   height: 26px;
  44.   width: 26px;
  45.   left: 4px;
  46.   bottom: 4px;
  47.   background-color: #fff;
  48.   -webkit- transition: .6s;
  49.   transition: .6s;
  50. }
  51.  
  52. input:checked + .slider {
  53.   background-color: #20bf6b;
  54. }
  55.  
  56. input:focus + .slider {
  57.   box-shadow: 0 0 1px #333;
  58.  
  59. }
  60.  
  61. input:checked + .slider:before {
  62.   -webkit-transform: translateX(26px);
  63.   -ms-transform: translateX(26px);
  64.   transform: translateX(26px);
  65. }
  66.  
  67. .slider.round {
  68.   border-radius: 41px;
  69. }
  70.  
  71. .slider.round:before {
  72.   border-radius: 50%;
  73. }
  74.  
  75. .ball {
  76.   width: 100px;
  77.   height: 100px;
  78.   background-color: #fc5c65;
  79.   border-radius: 50%;
  80.   margin: 50px;
  81.   animation: bounce .6s;
  82.   animation-direction: alternate;
  83.   animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  84.   animation-iteration-count: infinite;
  85.   animation-play-state: paused;
  86. }
  87.  
  88.  
  89. @keyframes bounce {
  90.     from { transform: translate3d(0, -100px, 0);     }
  91.   to   { transform: translate3d(0, 100px, 0); }
  92. }
  93.  
  94. /* Prefix Support */
  95. #ball {
  96.   box-shadow: 4px 4px 24px #cacaca;
  97. }
  98.  
  99. .ball {
  100.   -webkit-animation-name: bounce;
  101.   -webkit-animation-duration: 0.5s;
  102.   -webkit-animation-direction: alternate;
  103.   -webkit-animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  104.   -webkit-animation-iteration-count: infinite;
  105. }
  106.  
  107. @-webkit-keyframes bounce {
  108.   from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  109.   to   { -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); }
  110. }
  111.  
  112. .slider {
  113.   box-shadow: 8px 8px 18px #cacaca;
  114. }
  115. </style>
  116. </div>
  117. <script>
  118. document.getElementById("checkbox").onclick = function() {
  119.   if(document.getElementById("checkbox").checked == false){
  120.     document.getElementById("ball").style.animationPlayState = "paused";
  121.     document.getElementById("ball").style.backgroundColor = "#fc5c65";
  122.   }else{
  123.     document.getElementById("ball").style.animationPlayState =  "running";
  124.     document.getElementById("ball").style.backgroundColor = "#20bf6b";
  125.   }
  126. }
  127.  
  128. document.getElementById("ball").style.transition = "all .4s";
  129.  
  130. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top