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