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

Related posts:

Partner with Us

We are providing an exclusive partnership offer to individuals and companies who are interested in setting up their own web design & development company. For more information about how to partner with us, please contact us