<label class="container" id="container">
  <input type="checkbox" class="checkbox" />
  <div class="switch" id="switch">
    <span class="gooey_bg gooey_bg_1" ></span>
    <span class="gooey_bg gooey_bg_2" ></span>
  </div>
  
  <div class="time_text">
    <span class="time_text_am">AM</span>
    <span class="time_text_pm">PM</span>
  </div>
</label>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
  <defs>
    <filter id="fluid">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" 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" />
    </filter>
  </defs>
</svg>












<div class="projHeader">
  <div class="primaryText">Fluid Switch</div>
  <div class="secondaryText">AM/PM Toggle Switch</div>
  <div class="createdBy">Created By <a href="http://www.dropinks.com">Dropinks</a></div></div>
</div>
.container{box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.4);cursor: pointer; display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70px; height: 35px; background: #1e59af; border-radius: 50px; user-select: none;}
.checkbox{display:none;}
.gooey_bg{background: #fff; width: 45px; height: 45px; border-radius: 100%; display: inline-block; position: absolute; left: -5px; top: -5px; }
svg{width: 0; height: 0;}


.switch{filter: url("index.html#fluid");-webkit-filter: url("#fluid"); width: 100%; height: 100%;}

.time_text{color: #1e59af; font-size: 14px;}
.time_text_am{position: absolute; left: 7px; top: 50%; transform: translateY(-50%);}
.time_text_pm{position: absolute; right: 7px; top: 50%; transform: translateY(-50%);}

input[type="checkbox"].checkbox:checked + .switch .gooey_bg_1{animation: switchOn_1 600ms linear forwards; }
input[type="checkbox"].checkbox:checked + .switch .gooey_bg_2{animation: switchOn_2 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes switchOn_1 { 
  0%{transform: translateX(0px) scale(1); transition-timing-function: ease;} 
  30%{transform:  translateX(15px) scale(0.4); transition-timing-function: ease;}  
  100%{transform:  translateX(25px) scale(0.3); transition-timing-function: ease;}
}
@keyframes switchOn_2 {
  0%{transform: translateX(15px) scale(0.3); transition-timing-function: ease;} 
  100%{transform: translateX(35px) scale(1); transition-timing-function: ease;}
}

.switch .gooey_bg_1{animation: switchOff_1 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;}
.switch .gooey_bg_2{animation: switchOff_2 600ms linear forwards;}
@keyframes switchOff_2 { 
  0%{transform: translateX(35px) scale(1); transition-timing-function: ease;} 
  30%{transform:  translateX(20px) scale(0.4); transition-timing-function: ease;}  
  100%{transform:  translateX(10px) scale(0.3); transition-timing-function: ease;}
}
@keyframes switchOff_1 { 
  0%{transform: translateX(35px) scale(0.3); transition-timing-function: ease;} 
  100%{transform:  translateX(0px) scale(1); transition-timing-function: ease;}
}












html, body{
  width: 100%; 
  height: 100%; 
  font-family: 'Roboto', sans-serif;
}
body{
  margin: 0;
  background: #4085ee

}

.projHeader{position: absolute; left: 8%; top: 50%; transform: translateY(-50%); color: #fff;   border-right: 1px solid #fff;padding-right: 15px;}
.primaryText{font-weight: 300; font-size: 50px; text-shadow: 2px 2px 1px rgba(0,0,0,0.3);}
.secondaryText{font-weight: 300; text-align: right; font-size: 25px;}
.createdBy{font-weight: 300; text-align: right; font-size: 17px; margin-top :10px;}
.createdBy a{color: #fff; text-decoration: none; border-bottom: 1px solid #fff;}
.footer{position: absolute; right: 8%; top: 50%; transform: translateY(-50%); border-left: 1px solid #fff;padding-left: 15px;}
.footer a{display: inline-block; font-size: 17px; padding: 7px 0; color: #fff; text-decoration: none; }


@media only screen and (max-width: 1200px) {
  .projHeader{position: static; transform: translate(0);}
.primaryText{font-weight: 300; font-size: 30px;text-align: center; margin-top: 10px;}
.secondaryText{font-weight: 300; text-align: center; font-size: 20px;}
  .createdBy{font-weight: 300; text-align: center; font-size: 17px; margin-top :5px;}
.createdBy a{color: #000; text-decoration: none; border-bottom: 1px solid #000;}

.footer{position: fixed; bottom: 0; right: auto; top: auto; left: 0; border-top: 1px solid rgba(0,0,0,0.5); width: 100%; transform: translate(0); border: none; padding: 0; text-align: center; border-top: 1px solid #bfc7e4;}
  .footer div{display: inline-block;}
.footer a{display: inline-block; font-size: 17px; padding: 7px 0; color: #000; text-decoration: none; margin: 0px 20px;}
}

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:300,400

External JavaScript

This Pen doesn't use any external JavaScript resources.