<!--
Based off of the following dribbble: https://dribbble.com/shots/2188721-Liquid-checkbox-radio-button
-->
<div id="container">
<input type="checkbox" id="circle-input"/>
<label for="circle-input" id="circle-cont">
<div id="circle"></div>
</label>
<label for="circle-input" id="label-name">
Radio button
</label>
</div>
@import url(https://fonts.googleapis.com/css?family=Raleway:400);
$blue: #009fd6;
//Animation for check
@keyframes checkIn {
0% {top: -1%; height: 10px; width: 24px; margin-left: -12px;}
7% {top: -4%; height: 12.5px; width: 22px; margin-left: -11px;}
17% {top: -2%; height: 15px; width: 12px; margin-left: -6px;}
25% {top: 20%; height: 15px; width: 10px; margin-left: -5px;}
30%{top: 102%; height: 10px; width: 28px; margin-left: -14px;}
45%{top: 50%; height: 15px; width: 6px; margin-left: -3px; margin-top: -10px}
60%{top: 50%; height: 20px; width: 10px; margin-left: -5px;}
70%{top: 50%; height: 40px; width: 40px; margin-left: -20px; margin-top: -20px;}
80%{top: 50%; height: 32px; width: 32px; margin-left: -16px; margin-top: -16px;}
90% {top: 50%; height: 24px; width: 24px; margin-left: -12px; margin-top: -12px;}
100% {top: 50%; height: 24px; width: 24px; margin-left: -12px; margin-top: -12px;}
}
@keyframes checkOut{
0% { overflow: visible; top: 50%; width: 30px; height: 30px; margin-top: -17px; margin-left: -17px; border: 2px solid $blue; opacity: 1;}
100% { width: 46px; top: 50%; height: 46px; margin-top: -25px; margin-left: -25px; border: 2px solid $blue; opacity: 0;}
}
html, body{
// padding: 0;
// margin: 0;
background: #000;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container{
position: relative;
left: 50%;
top: 50%;
display: inline-block;
transform: translateX(-50%) translateY(-50%);
}
input#circle-input{
display: none;
&:checked + label{
&#circle-cont{
overflow: hidden;
#circle{
background: $blue;
animation: checkIn 1s forwards linear 0s 1;
}
}
}
}
label{
&#circle-cont{
border-radius: 50%;
width: 30px;
height: 30px;
border: 1px solid #FFF;
display: block;
position: relative;
float: left;
overflow: visible;
#circle{
background: rgba(0,0,0,0);
position: absolute;
left: 50%;
border-radius: 50%;
top: -100%;
animation: checkOut 0.25s forwards linear 0s 1;
}
}
&#label-name{
color: #FFF;
font-family: "Raleway", sans-serif;
position: relative;
float: left;
font-size: 1.25em;
margin: 4px 12px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.