5 Star Rating using HTML and CSS (Code + Demo)

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.

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. Live Demo 👇👇

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.

The download will start automatically