Live Demo - Bootstrap 4 Creative Animated Checkbox Demo

See Free Live Demo example of 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 downl...

<!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);
}