Skip to content

Instantly share code, notes, and snippets.

@john92paul

john92paul/5-bounce-effect-toggle-button.html

Created August 14, 2020 13:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save john92paul/6d9791a588e973b709e7c8474716597f to your computer and use it in GitHub Desktop.
Save john92paul/6d9791a588e973b709e7c8474716597f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
5-bounce-effect-toggle-button.html
/* Button css */
#button-15 .knobs:before, #button-15 .knobs:after{position: absolute;top: 4px;width: 20px;height: 10px;color: #fff;font-size: 10px;font-weight: bold;text-align: center;line-height: 1;padding: 9px 4px;opacity: 1;border-radius: 50%;transform: scale(1);transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;}
#button-15 .knobs:before{content: '';left: 4px;background-color: #fff;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.20);}
#button-15 .knobs:after{content: '';right: 4px;opacity: 0;transform: scale(4);background-color: #fff;}
#button-15 .checkbox:checked + .knobs:before{opacity: 0;transform: scale(4);}
#button-15 .checkbox:checked + .knobs:after{opacity: 1;transform: scale(1);}
#button-15 .checkbox:checked ~ .layer{background-color: #17c2bd;}
.knobs, .layer{position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.button{position: relative;top: 50%;width: 65px;height: 36px;margin: -20px auto 0 auto;overflow: hidden;margin: 0;}
.button.r, .button.r .layer{border-radius: 100px;}
.checkbox{position: relative;width: 100%;height: 100%;padding: 0;margin: 0;opacity: 0;cursor: pointer;z-index: 3;}
.knobs{z-index: 2;}
.layer{width: 100%;background-color: #d3d3d3;transition: 0.3s ease all;z-index: 1;}
<!-- Html Body -->
<body>
<div class="button r center" id="button-15">
<input type="checkbox" class="checkbox">
<div class="knobs"></div>
<div class="layer"></div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment