NiceSnippets.com
Bootstrap 4 Creative Animated Checkbox Demo
In this post we are giving you animated checkbox example. this is pure css checkbox animation. when you click on checkbox at that time zoomin check and when uncheck then check is zoomout. this is call css animated check mark.
We allows to free snippets of colorful checkbox in html , you can download full code of css animated check mark layout. Here in this post i will give you example of animated checkbox bootstrap snippet and you will get simple code of html, css and jquery. In pure css checkbox animatation snippet i give you three tab with html, css and js, you can easily get code of bootstrap checkbox style not working layout.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12 main-section text-center">
<div class="row">
<div class="col-md-12 hedding">
<h1>check box</h1>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="check">
<input id="check" type="checkbox" checked/>
<label for="check">
<div class="box"><i class="fa fa-check"></i></div>
<span>checkbox</span>
</label>
</div>
<div class="check">
<input id="check1" type="checkbox"/>
<label for="check1">
<div class="box"><i class="fa fa-check"></i></div>
<span>checkbox</span>
</label>
</div>
<div class="check">
<input id="check2" type="checkbox"/>
<label for="check2">
<div class="box"><i class="fa fa-check"></i></div>
<span>checkbox</span>
</label>
</div>
<div class="check">
<input id="check3" type="checkbox"/>
<label for="check3">
<div class="box"><i class="fa fa-check"></i></div>
<span>checkbox</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
</body>
</html>
.main-section{
color:#fff;
font-family:"Poiret One", cursive;
background:#123456;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,50%);
}
.hedding{
margin:0px 0px 30px 0px;
}
.check{
padding-left:50px;
}
.check span{
margin:10px 10px;
font-size:20px;
cursor:pointer;
}
.container .check input{
display: none;
}
.container .check input:checked + label .box i{
-webkit-transform:translate(-50%, -50%)scale(1);
transform:translate(-50%, -50%)scale(1);
transition-duration:250ms;
-webkit-transition-duration:250ms;
opacity:1;
}
.container .check label{
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-ms-flex-direction:row;
flex-direction:row;
min-height:60px;
}
.container .check label .box{
background:rgba(0, 0, 0, 0.3);
border-radius:5px;
cursor:pointer;
position:relative;
margin-top:-10px;
width:50px;
height:50px;
-webkit-transition:background 300ms ease;
transition:background 300ms ease;
}
.container .check label .box i{
position:absolute;
top:50%;
left:50%;
font-size:20px;
display:inline-block;
opacity:0;
pointer-events:none;
-webkit-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
-webkit-transition-delay:200ms;
transition-delay:200ms;
-webkit-transform:translate(-50%, -50%) scale(6);
transform:translate(-50%, -50%) scale(6);
}
