X

Animated checkbox using Css3 tutorial with live demo

As the web technology is getting advanced the websites are also becoming more advanced. In this post we are explaining about checkbox which is used widely in html forms. This is an animated check box which can use to make html form more attractive. Below is the full code for this tutorial and you can also find a live demo option on bottom of this tutorial.

Animated checkbox CSS

	.wrapper{
		width:80%;
		height:auto;
		float:left;
		margin: 0 0 0 10%;
	}
	ul {
	  	list-style: none;
	}
	ul li {
	 	 padding: 0.4em
	}
	label.styled {
		width: 80%;
		text-align: center;
		padding: 0.6em 2em;
		color: #fff;
		transition: all 0.4s ease;
		position: relative;
		overflow: hidden;
		cursor: pointer;
		background-color: #0e2c8f;
		display: block;
	}
	label.styled:before {
		width:40px;
		height:100%; 
		content: '✓';
		line-height: 40px;
		font-size: 25px;
		color: #000;
		background-color: #fee405;
		position: absolute;
		top:0;
		left:100%;
		transition: all 0.4s ease;
		opacity: 0;
		border-right: 1px solid #fff;
	}
	label.styled:hover:before {
		left: 98%;
	}
	input.styled {
		display: none;
	}
	/* Checked */
	input.styled:checked ~ label.styled {
		background-color: #1b2b60;
		transform:scale(1.1); 
	}
	input.styled:checked ~ label.styled:before {
		left:0px;
		opacity: 1;
	}

Animated checkbox Html

 
		<!-- Animated Check Box -->
		<div class="wrapper">
				<ul>
				  <li>
					<input type="checkbox" class="styled" id="b_1">
					<label class="styled" for="b_1">Check 1</label>
				  </li>
 
				  <li>
					<input type="checkbox" class="styled" id="b_2">
					<label class="styled" for="b_2">Check 2</label>
				  </li>
 
				  <li>
					<input type="checkbox" class="styled" id="b_3">
					<label class="styled" for="b_3">Check 3</label>
				  </li>
 
				  <li>
					<input type="checkbox" class="styled" id="b_4">
					<label class="styled" for="b_4">Check 4</label>
				  </li>
 
				  <li>
					<input type="checkbox" class="styled" id="b_5">
					<label class="styled" for="b_5">Check 5</label>
				  </li>
				</ul>
		</div>
 
		<!-- /Animated Check Box -->

Live Demo