
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