Simple CSS3 Star rating system demo with tutorial

Here is a simple 5 star rating demo with code which is built on pure CSS (CSS3). Bottom of the explanation code you can find the live demo button. If you think its is useful then please share!

CSS

		.wrapper{
			float:left;
			width: auto;
			margin:8% 0 0 35%;
		}
		.css3-rating-stars,
		.css3-rating-stars label::before{
			display: inline-block;
		}
		.css3-rating-stars label:hover,
		.css3-rating-stars label:hover ~ label{
			color: #06befb;
		}
		.css3-rating-stars *{
			margin: 0;
			padding: 0;
		}
		.css3-rating-stars input{
			display: none;
		}
		.css3-rating-stars{
			unicode-bidi: bidi-override;
			direction: rtl;
		}
		.css3-rating-stars label{
			color: #ccc;
		}
		.css3-rating-stars label::before{
			content: "\2605";
			width: 48px;
			line-height: 18px;
			text-align: center;
			font-size: 48px;
			cursor: pointer;
		}
		.css3-rating-stars input:checked ~ label{
			color: #f5b301;
		}
		.css3-rating-disabled{
			opacity: .50;
			-webkit-pointer-events: none;
			-moz-pointer-events: none;
			pointer-events: none;
		}

HTML

		<div class="wrapper">
		<!-- css3-rating-stars -->
			<div class="css3-rating-stars">
				<form>
					<input type="radio" name="group-1" id="group-1-0" value="5" />
					<label for="group-1-0"></label>
					<input type="radio" name="group-1" id="group-1-1" value="4" />
					<label for="group-1-1"></label>
					<input type="radio" name="group-1" id="group-1-2" value="3" />
					<label for="group-1-2"></label>
					<input type="radio" name="group-1" id="group-1-3" value="2" />
					<label for="group-1-3"></label>
					<input type="radio" name="group-1" id="group-1-4"  value="1" />
					<label for="group-1-4"></label>
				</form>
			</div>
		<!-- /css3-rating-stars -->
		</div>

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