Simple CSS3 Star rating system demo with tutorial

		.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;
		}

.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; }

		<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>

<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>