How to Make Awesome Animated Checkbox with Html5 Css3

Assalamu Alaikum In this post we will learn how to make Animated checkbox with css3 html5 and fonts-awesome icons which you can get it from github front awesome dot com and this is an easy way to implement such good things I your site it is purely css3 nothing smell like other else just copy these codes below and its done


Place this code in the head tag"by the way this link is for icons"

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
 
And then copy this html code and paste in the body tag

<div class="checkbox">
 <label for="checkbox">
  <input id="checkbox" class="checkbox" type="checkbox"></input>
   <span class="span"> This is check box 1 </span>
 </label>
</div>
    




And last but not the least this is Css style, including Animation  take a look :)

/*-----------Adding font-Awesome fonts in Css-------------*/
 @font-face {
    font-family: font-awesome;
    src: url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
}
input[type="checkbox"] {
 display:none;
}
/*-----------Label-------------*/
label{
 cursor:pointer;
 color:#666;
}
/*-----------Input checkbox-------------*/
input[type="checkbox"] + .span:before{
 content:"\f096";
 speak:none;
 font-style:normal;
 font-weight:normal;
 font-variant:normal;
 text-transform:none;
 width:1em;
 margin-right:5px;
 font-family:FontAwesome;
 display:inline-block;
 font-size:20px;
 color:#8fc400;
 animation:mymove2 200ms ease-out;
}
input[type="checkbox"]:checked + .span:before{
 content:"\f14a";
 animation:mymove 200ms ease-in-out;
 -webkit-animation:mymove 150ms ease-in-out;
}
/*-----------Animation-------------*/
@keyframes mymove{
 0%{
  transform: scale(0);
 }
    1%{
  transform: scale(0);
 }
 100%{
  transform: scale(100%);
 }
}

@-webkit-keyframes mymove {
  from{
  transform: scale(0);
 }
 to{
  transform: scale(100%u);
 }
}
@keyframes mymove2 {
  from{
  transform: scale(100%);
 }
 to{
  transform: scale(0);
 }
}



Comments

Post a comment