How to Create 5 Start Rating Using HTML and CSS only?

Example

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 Using HTML and CSS:

The 5 Star Rating has been created using only HTML and CSS. Here I have added the hover effect also. If you hover over the star you will see some effect. Also, I have created these 5 stars in a stylish way: If someone selects one star then the star will be Red If someone selects start more than 2 and less than 5 then the star color will be blue and If someone selects 5 stars then star color will be Golden.

I have provided the source code and a live demo here.

<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
  <title>Star rating using pure CSS</title>
</head>

<body>
  <div class="stars">
    <input type="radio" class="star star-5" id="star-5" name="star"/>
    <label class="star star-5" for="star-5"></label>
    <input type="radio" class="star star-4" id="star-4" name="star"/>
    <label class="star star-4" for="star-4"></label>
    <input type="radio" class="star star-3" id="star-3" name="star"/>
    <label class="star star-3" for="star-3"></label>
    <input type="radio" class="star star-2" id="star-2" name="star"/>
    <label class="star star-2" for="star-2"></label>
    <input type="radio" class="star star-1" id="star-1" name="star"/>
    <label class="star star-1" for="star-1"></label>
    <input type="radio" class="star star-1" id="star-1" name="star"/>
  </div>
</body>

</html>
div.stars{
  width:300px;
  
}
input.star{
  display:none;
}
label.star{
  float:right;
  padding:10px;
  font-size:36px;
  color:0000ff;
  cursor:pointer;
  transition: all .2s;
}
label.star:hover{
  font-size:38px;
  color:green;
  transition: all .25s;
}

input.star:checked ~ label.star:before{
  content:'\f005';
  color:blue;
  transition: all 0.2s
}
input.star-5:checked ~ label.star:before{
  color:#FE7;
}
input.star-1:checked ~ label.star:before{
  color:red;
}
label.star:before{
  content:'\f006';
  font-family: FontAwesome;
}

How to Create 5 Star Rating using HTML CSS

Step 1:

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 the name. Similarly, create a CSS file using style.css the name. Be sure to attach the CSS file to the HTML file. You can also add CSS inside the head tag.

Step 2:

Add the below code in your index.html the file that you have created previously

<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
  <title>Star rating using pure CSS</title>
</head>

<body>
  <div class="stars">
    <input type="radio" class="star star-5" id="star-5" name="star"/>
    <label class="star star-5" for="star-5"></label>
    <input type="radio" class="star star-4" id="star-4" name="star"/>
    <label class="star star-4" for="star-4"></label>
    <input type="radio" class="star star-3" id="star-3" name="star"/>
    <label class="star star-3" for="star-3"></label>
    <input type="radio" class="star star-2" id="star-2" name="star"/>
    <label class="star star-2" for="star-2"></label>
    <input type="radio" class="star star-1" id="star-1" name="star"/>
    <label class="star star-1" for="star-1"></label>
    <input type="radio" class="star star-1" id="star-1" name="star"/>
  </div>
</body>

</html>

Step 3: Add CSS Code

Now copy the below code and paste it in style.css the file that you had created. And if you have only created index.html file then inside <head></head> tag add <style></style> tag and add the given CSS code.

div.stars{
  width:300px;
  
}
input.star{
  display:none;
}
label.star{
  float:right;
  padding:10px;
  font-size:36px;
  color:0000ff;
  cursor:pointer;
  transition: all .2s;
}
label.star:hover{
  font-size:38px;
  color:green;
  transition: all .25s;
}

input.star:checked ~ label.star:before{
  content:'\f005';
  color:blue;
  transition: all 0.2s
}
input.star-5:checked ~ label.star:before{
  color:#FE7;
}
input.star-1:checked ~ label.star:before{
  color:red;
}
label.star:before{
  content:'\f006';
  font-family: FontAwesome;
}

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 ping me on Twitter

TCS Ninja Interview Experience

Scroll to Top