Animated check inputs use XHTML Characters

In this example below you will see how to do a Animated check inputs use XHTML Characters with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by beben-koben, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright beben-koben ©
  • HTML
  • CSS
  • JavaScript
    <input type="checkbox" id="check">
<label for="check" class="loadcheck" id="loadcheck">
  <span class="entypo-cancel">&#10008;</span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="entypo-check">&#10004;</span>
</label>
  
<div class="buka">Follow me on <a href="https://twitter.com/bebenkoben">twitter</a></div>
  
<input type="checkbox" id="check1" checked>
<label for="check1" class="loadcheck" id="loadcheck1">
  <span class="entypo-cancel">&#10008;</span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="entypo-check">&#10004;</span>
</label>

/*Downloaded from https://www.codeseek.co/beben-koben/animated-check-inputs-use-xhtml-characters-Jsfqu */
    /*******************************************************
Forked by 
https://cssdeck.com/labs/full/animated-check-inputs 
Used only CSS
*******************************************************/
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
body{
  font-family:"helvetica Neue";
  background:#444;
}
.buka {
  text-align:center;
  font-weight: bold;
  letter-spacing:1px;
  color:#fff;
  opacity:0;
  -webkit-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition:.5s ;
}
.buka a {
  color:#6fcbed;
  text-decoration:none;
}
#check:checked ~ .buka{
  opacity:1;
  letter-spacing:2px;
}
input[type="checkbox"] {
  display:none;
}
#loadcheck {
  position:absolute;
  left:0;
  right:0;
  margin:30px auto;
}
#loadcheck1 {
  position:absolute;
  left:0;
  right:0;
  margin:75px auto;
}
.loadcheck {
  width:165px;
  height:40px;
  font-size:35px;
}
.loadcheck span {float:left;}
.load {
  display:block;
  width:7px;
  height:7px;
  margin:20px 5px;
  border-radius:10px;
  transition:.5s;
  cursor:pointer;
}
.load:nth-child(2){
  background:#db1536;
}
.load:nth-child(3){
  background:rgba(219, 21, 54,.7);
}
.load:nth-child(4){
  background:rgba(219, 21, 54,.5);
}
.load:nth-child(5){
  background:rgba(219, 21, 54,.3);
}
.load:nth-child(6){
  background:rgba(219, 21, 54,.1);
}
span[class*="entypo"]{cursor:pointer;}
span[class*="cancel"]{
  font-size:40px;
  color:#db1536;
  transition:.5s;
  transition-delay:.1s;
}
span[class*="check"]{
  color:rgba(0,0,0,.1);
  transition:.5s;
  transition-delay:.1s;
}
#check:checked + .loadcheck .entypo-check{
  color:#58d37b;
}
#check:checked + .loadcheck .entypo-cancel{
  color:rgba(0,0,0,.1);
}
#check:checked + .loadcheck .load:nth-child(2){
  background:rgba(88, 211, 123,.1);
}
#check:checked + .loadcheck .load:nth-child(3){
  background:rgba(88, 211, 123,.3);
}
#check:checked + .loadcheck .load:nth-child(4){
  background:rgba(88, 211, 123,.5);
}
#check:checked + .loadcheck .load:nth-child(5){
  background:rgba(88, 211, 123,.7);
}
#check:checked + .loadcheck .load:nth-child(6){
  background:#58d37b;
}
#check1:checked + .loadcheck .entypo-check{
  color:#58d37b;
}
#check1:checked + .loadcheck .entypo-cancel{
  color:rgba(0,0,0,.1);
}
#check1:checked + .loadcheck .load:nth-child(2){
  background:rgba(88, 211, 123,.1);
}
#check1:checked + .loadcheck .load:nth-child(3){
  background:rgba(88, 211, 123,.3);
}
#check1:checked + .loadcheck .load:nth-child(4){
  background:rgba(88, 211, 123,.5);
}
#check1:checked + .loadcheck .load:nth-child(5){
  background:rgba(88, 211, 123,.7);
}
#check1:checked + .loadcheck .load:nth-child(6){
  background:#58d37b;
}


/*Downloaded from https://www.codeseek.co/beben-koben/animated-check-inputs-use-xhtml-characters-Jsfqu */
    

Comments