Star Rating System Using Only HTML CSS

byCodingFlicks -October 01, 2021

0

Nowadays, we do a lot of shopping online. After receiving a product or service from a company, customers tend to express their opinion about that service or product. A star rating widget or system is a user interface element that helps users express their opinion about a service or product they have used. In this blog post, we have created a star rating system or widget using only HTML and CSS. In the video tutorial below, we have shown how to create this HTML CSS snippet. Watch the video tutorial before collecting the source code.

We hope you enjoyed the video tutorial on creating a star rating widget using HTML and CSS. In this widget, users can select a specific number of stars, usually on a scale of 1 to 5, depending on their level of satisfaction. 1 is considered to be less satisfied, and 5 is considered very satisfied. The rating system can sometimes be represented by other symbols like hearts, thumbs up, etc. The main backend system of a website shows the average rating based on previous user input. For example, 3.5 stars out of 5 based on 1,000 reviews. This widget is used on websites for many reasons, like social proof and trust, quick and easy feedback, influencing purchase decisions, user engagement, valuable data and insights, SEO benefits, content personalization, etc. These types of widgets are mainly used by e-commerce websites, review websites and directories, service marketplaces, content platforms/media websites, educational platforms, app stores, and more.

There is a more advanced way to get the effect using JavaScript, but we are using only HTML and 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.

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 the CSS transform property. To align 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 to set up two different stages of the star rating. The before-class will be for the state before someone clicks 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, we 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 ]:

To create this Star Rating System Using Only an HTML and CSS snippet, you need to create an HTML and a CSS file. Then, copy the code from the code box below and paste it into your project files. You can also download the source code by clicking the download button below this blog post.

ADD 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">
			<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>
	
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	background: #FBAE1F;
}
.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: #ffff;
	top: 0;
	opacity: 0;
	transition: .6s;
}
.wrapper label:hover:after, 
.wrapper label:hover~label:after, 
.wrapper input:checked~label:after {
	opacity: 1;
}

Implementing this star rating widget system on a website acts as social proof, builds credibility, and reassures potential customers. This widget provides quantitative information on user satisfaction; any business can benefit from this information. We hope you have collected the code. To get more, click the "Load More" button on the homepage. Thanks for the visit.

LOAD MORE

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