Skip to content

Instantly share code, notes, and snippets.

@john92paul

john92paul/4-in-out-toggle-button.html

Last active August 14, 2020 13:12
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/8d8c998445fe848bad85dbf97c6e9a9e to your computer and use it in GitHub Desktop.
Save john92paul/8d8c998445fe848bad85dbf97c6e9a9e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
4-in-out-toggle-button.html
/* Button css */
#button-12 .knobs:before, #button-12 .knobs:after, #button-12 .knobs span, #button-12 .knobs span:before, #button-12 .knobs span:after{position: absolute;top: 4px;font-size: 10px;font-weight: bold;text-align: center;line-height: 1;border-radius: 50%;transition: 0.3s ease all;}
#button-12 .knobs:before{content: '';left: 4px;}
#button-12 .knobs:after{content: '';right: 4px;}
#button-12 .knobs:before, #button-12 .knobs:after{width: 27px;height: 10px;color: #4e4e4e;padding: 9px 3px;z-index: 1;}
#button-12 .knobs span{display: inline-block;z-index: 2;}
#button-12 .knobs span, #button-12 .knobs span:before, #button-12 .knobs span:after{width: 20px;height: 10px;padding: 9px 4px;}
#button-12 .knobs span:before, #button-12 .knobs span:after{content: '';top: 0;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.20);}
#button-12 .knobs span:before{left: 4px;background-color: #fff;}
#button-12 .knobs span:after{right: -74px;background-color: #fff;}
#button-12 .checkbox:checked + .knobs span:before{left:-28px;}
#button-12 .checkbox:checked + .knobs span:after{right: -32px;}
#button-12 .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;}
<!-- Button Body -->
<body>
<div class="button r center" id="button-12">
<input type="checkbox" class="checkbox">
<div class="knobs">
<span></span>
</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