Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Gooey Switch - Radio Button
<div class="gp-header">Gooey Switch - Radio Button</div>
<div class="switchContainer" id="switchContainer">
<div class="switchBg"></div>
<div class="switchBtn"></div>
<svg xmlns="" version="1.1" width="800">
<filter id="gooey">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<div class="gp-footer">
Follow me on :
<a href="" class="soc_icons" target="_blank">facebook</a> /
<a href="" class="soc_icons" target="_blank">twitter</a>
var container = document.querySelector("#switchContainer");
function onOffSwitch(){
container.classList += " switchOff";
container.classList += " switchOn";
container.addEventListener("click", onOffSwitch, false);
body{background: #333;}
.gp-header{font-family: georgia; font-size: 40px; color: #5fd698; font-style: italic; text-align: center; margin-top: 25px;}
.gp-footer{position: fixed; color: rgba(95,214,152,0.7); bottom: 10px; left: 50%; font-family: georgia; font-style: italic; transform: translateX(-50%);}
.gp-footer .soc_icons{display: inline-block; color: #5fd698; margin: 0px 10px;}
::-moz-selection { background: transparent;}
::selection {background: transparent;}
.switchContainer{display: inline-block;filter: url("index.html#gooey");-webkit-filter: url("#gooey");position: absolute;left:50%;top:50%; cursor: pointer; transform: translate(-50%, -50%) scale(2);}
.switchBg{width:60px;height: 7px;}
.switchBtn{width: 30px;height: 30px;border-radius: 50%; display: inline-block; position: absolute; left: 0px; top: -12px; transform: translate3d(0,0,0);}
.switchBg, .switchBtn{background: #fff; transition: 300ms all ease;}
.switchContainer.switchOn .switchBtn, .switchContainer.switchOn .switchBg{background: #5fd698;}
.switchContainer.switchOn .switchBtn{animation: switchOn 250ms linear forwards; }
.switchContainer.switchOff .switchBtn{animation: switchOff 250ms linear forwards; }
@keyframes switchOn {
0%{transform: scale3d(1,1,1) translate3d(0px,0,0); transform-origin: left center;}
40%{transform: scale3d(1.4,0.7,0) translate3d(20px,0,0); transform-origin: right center;}
70%{transform: scale3d(0.9,1.15,1) translate3d(33px,0,0); }
100%{transform: scale3d(1,1,1) translate3d(30px,0,0); }
@keyframes switchOff {
0%{transform: scale3d(1,1,1) translate3d(30px,0,0); transform-origin: right center;}
40%{transform: scale3d(1.4,0.7,0) translate3d(10px,0,0); transform-origin: right center;}
70%{transform: scale3d(0.9,1.15,1) translate3d(-3px,0,0); }
100%{transform: scale3d(1,1,1) translate3d(0px,0,0); }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment