Star Rating System Using Only HTML CSS

byCodingFlicks -October 01, 2021

0

Hello Visitors, Today in this blog, we'll learn to create a Star Rating System widget or snippet using only HTML CSS. The code we used here is javascript-free and, we will see the action of pseudoselectors and CSS transition. Earlier I have shared many projects on CSS animation examples, HTML CSS, Javascript, Webdesign, Frontend techniques etc. Check those if you have time.

We often see star rating systems on many apps and websites these days. People can express their feelings by rating a website or app they just have used. There is a more advanced way to get the effect using javascript but we are using only HTML CSS in this project. So the below code is a way of achieving the star rating effect using pure CSS.

We will first take the container div named 'wrapper'. Within the wrapper container, we will add the markup for our stars. The markup will be composed of two parts. One will be the radio button and, the other will have a visible label tied to the input that we interact with. Underneath each input element, we have added a label and set its value with a unique name, which is the id attribute of the previous input element. In this way, we will create five of them.

You May Like this:

At first, we will adjust the default height and width of the project by setting the default margin and padding to zero. After that, we have aligned the wrapper div in the middle. For that, we used absolute position value for the wrapper and later used CSS transform property. For aligning the input side by side, we have used the display flex property. Initially, the display value of the input element will be none. We have set the label to display block and set a width for them. Later, we used the CSS pseudo-class of the label for setting up two different stages of the star rating. the before class will be for the state before someone click on the star. the after class is for the stage when the user will click the stars. I have set two different colors for each stage. Initially for the after stage, I have set the opacity to zero. Then we have set the opacity to 1 for the stage of hover and checked.

Star Rating System Using Only HTML CSS [ Source Code ]:

For creating this project, you have to make two files. One is the HTML file with a .html extension and, the other one is a CSS file with a .css extension. Then link the external CSS with the HTML file or, the HTML markups will not get the style it requires. Please copy the source code below and paste them into the relevant file and save them. Here is just a simple demonstration of how we can create a star rating effect using pure CSS. Play around with the code by changing different values of the project and make it more interactive.

HTML:

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
	<meta charset="UTF-8">
	<title>Star Rating Using Only HTML CSS</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="wrapper">
		<div class="wrapper">
 <input type="radio" name="rate" id="rate1">
 <label for="rate1"></label>
 <input type="radio" name="rate" id="rate2">
 <label for="rate2"></label>
 <input type="radio" name="rate" id="rate3">
 <label for="rate3"></label>
 <input type="radio" name="rate" id="rate4">
 <label for="rate4"></label>
 <input type="radio" name="rate" id="rate5">
 <label for="rate5"></label>
</div>
	</div>
</body>
</html>

CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	background: beige;
}
.wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotateY(180deg);
	display: flex;
}
.wrapper input {
	display: none;
}
.wrapper label {
	display: block;
	cursor: pointer;
	width: 150px;
}
.wrapper label:before {
	content: '★';
	position: relative;
	display: block;
	font-size: 150px;
	color: black;
}
.wrapper label:after {
	content: '★';
	position: absolute;
	display: block;
	font-size: 150px;
	color: deeppink;
	top: 0;
	opacity: 0;
	transition: .6s;
}
.wrapper label:hover:after, .wrapper label:hover~label:after, .wrapper input:checked~label:after {
	opacity: 1;
}

I hope you have successfully implemented the code. If you like this snippet, then follow us. We will be adding more of this and many more shortly. Thank you for visiting.

Please do not enter any spam link in the comment box.