This tutorial will help you if you want to create a 5 Star Rating using HTML and CSS. Here I have shared a Star Rating System HTML CSS tutorial. Rating stars in HTML are graphical elements used to represent a rating system, usually represented as stars or other symbols.
5 Star HTML is a feedback form that uses star icons as a checkbox, and the number of stars users are checking is the feedback according to the stars. If the stars are selected as 5 stars, then the services are best, and if they are selected as 1 star, the services of the business are worst. This type of project is used for an e-commerce website to get reviews on the products. So if you are planning to create an e-commerce website, adding this small project to your website will give it a great look.
if you want to create ecommerce website you can take reference from the below project.
E-Commerce Website Using HTML, CSS & Javascript
The five-star rating HTML CSS is basically what we see in a review section. This type of review rating system is used for different types of business, product, and e-commerce websites. With the help of this 5-star rating, the user will be able to give reviews about that product.
5 Star Rating HTML CSS
The 5 Star Rating created here has been created using only HTML and CSS. There are five stars and hover effects added to them. When you click on those stars, the background color of the stars will be yellow.
Create a Responsive Bootstrap Registration Form
It’s very simple so you don’t need a step-by-step tutorial here. I have provided the required source code and live demo here.
See the Pen Untitled by Foolish Developer (@foolishdevweb) on CodePen.
Hopefully by watching the demo above you understand how this five-star rating works. You will find the required source code in the demo section above.
However, I have given the source code below if necessary. You can create this 5 Star Rating HTML CSS to copy them.
How to Create 5 Star Rating using HTML CSS
To do this, first, create an HTML and CSS file. To create HTML and CSS files, open Notepad and save the file using index.html Rename. Similarly, create a CSS file using style.css Rename. Be sure to attach the CSS file to the HTML file.
1. HTML code of Star Rating
I created this star rating design using a very small amount of HTML code below. You copy the following HTML code and add it to your HTML file. Here the input function is used for the stars and type = “radio”. Five input functions have been used for five stars.
<div class=”rating”>
<input type=”radio” name=”rating” value=”5″ id=”5″><label for=”5″>☆</label>
<input type=”radio” name=”rating” value=”4″ id=”4″><label for=”4″>☆</label>
<input type=”radio” name=”rating” value=”3″ id=”3″><label for=”3″>☆</label>
<input type=”radio” name=”rating” value=”2″ id=”2″><label for=”2″>☆</label>
<input type=”radio” name=”rating” value=”1″ id=”1″><label for=”1″>☆</label>
</div>
HTML Output:
2. CSS code of 5 Star Rating
Now is the time to design this star rating system. Copy these CSS codes and add them to your CSS file.
body{
background: #222225;
color: white;
margin: 100px auto;
}
.rating {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
.rating > input{
display:none;
}
.rating > label {
position: relative;
width: 1.1em;
font-size: 15vw;
color: #FFD700;
cursor: pointer;
}
.rating > label::before{
content: “\2605”;
position: absolute;
opacity: 0;
}
.rating > label:hover:before,
.rating > label:hover ~ label:before {
opacity: 1 !important;
}
.rating > input:checked ~ label:before{
opacity:1;
}
.rating:hover > input:checked ~ label:before{
opacity: 0.4;
}
CSS output:
Conclusion:
Hopefully, you have been able to create this 5 Star Rating design using the above HTML and CSS code.
If there is any difficulty in assembling the above codes, you can take the help of the download button below. In the download button below you will find the source code required to create 5-star rating HTML CSS.
