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.
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.
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>
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;
}
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.
How would i change the size of the stars?
good stuff! do you know how i could use the same thing multiple time? because at the moment it is only styling the first one