<!--
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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.