Learn how to create a simple and amazing 5-star rating system using pure HTML and CSS. No JavaScript needed!
Table of Contents
A 5-star rating system is a user interface element that allows users to rate something on a scale of 1 to 5 stars. It is commonly used on websites and applications to allow users to provide feedback or rate products, services, or content.
As we all know, user interface and experience play a vital role in the success of any website or web application. Providing an easy and intuitive way for users to rate and provide feedback on the content is a crucial aspect of creating a positive user experience. In this blog post, we will guide you through creating a 5-star rating system using HTML and CSS that is both simple to implement and visually appealing. Whether you're a seasoned web developer or just starting out, this guide will provide you with the knowledge and tools needed to create an effective 5-star rating system for your website or web application.
Want to create a simple and amazing 5-star rating using HTML and CSS?
Let's start making an amazing 5-star rating Using HTML and CSS step by step.
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our 5-star rating. Below is a breakdown of the code:
1. <head> Section
- It sets the title as "Star rating using pure CSS".
- It includes meta tags for character encoding (UTF-8) and viewport settings (for responsive design).
- It links an external CSS file named
styles.cssto style the star rating system.
2. <body> Section
- A
<div class="rate">contains the rating system.
Radio Buttons for Rating
- Five radio buttons (
<input type="radio">) represent the rating levels (from 1 to 5 stars). - Each radio button:
- Has a unique id (star5, star4, etc.).
- Has the same name="rate" so only one can be selected at a time.
- Has a value corresponding to its rating (5, 4, 3, 2, or 1).
Labels as Stars
- Each radio button is followed by a
<label>that acts as a clickable star. - The for attribute links the label to its respective radio button (for="star5" links to id="star5", and so on).
- The title="text" provides a tooltip on hover.
After creating the files paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our 5-star rating effect. Here's a breakdown of what each part does:
1. Global Styles (* and body)
*{
margin: 0;
padding: 0;
background: #212121;
}- Resets all margins and paddings to ensure consistent styling across different browsers.
- Sets the background color of the entire page to dark gray (#212121).
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}- Centers the rating system horizontally and vertically in the viewport (100vh means full-screen height).
- Uses Flexbox for alignment.
2. Styling the .rate Container
.rate {
float: left;
height: 46px;
padding: 0 10px;
}- Floats the rating system to the left (though flexbox already centers it).
- Adds padding to prevent overcrowding.
3. Hiding Radio Buttons
.rate:not(:checked) > input {
position: absolute;
top: -9999px;
}- Hides the radio buttons by positioning them far off-screen.
- This ensures they are still functional but not visible.
4. Styling the Star Labels
.rate:not(:checked) > label {
float:right;
width:1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:30px;
color:#ccc;
}- Right-aligns the labels (float: right;) so the stars appear from right to left.
- Sets the font size to 30px to make stars large.
- Gives a light gray (#ccc) color to unselected stars.
- Changes cursor to a pointer, making it clear that the stars are clickable.
5. Adding Star Symbols
.rate:not(:checked) > label:before {
content: '★ ';
}- Uses CSS content property to add a star (★) symbol before each label.
- The stars appear next to each radio input.
6. Changing the Star Color When Selected
.rate > input:checked ~ label {
color: #ffc700;
}- When a radio button is selected, all previous stars turn yellow (#ffc700).
- ~ (sibling selector) ensures all stars before the selected one are colored.
7. Changing Color on Hover
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
color: #deb217;
}- When hovering over a star, it and all previous stars turn golden yellow (#deb217).
- ~ (sibling selector) ensures stars before the hovered one also change color.
8. Fine-Tuning Hover Effects for Checked Stars
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
color: #c59b08;
}- When a user hovers over a star after selecting a rating, the stars get a slightly darker yellow (#c59b08) to indicate a temporary change.
- This ensures a smooth interactive experience.
This will give our 5-star rating an upgraded presentation. Create a CSS file with the name styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
*{
margin: 0;
padding: 0;
background: #212121;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.rate {
float: left;
height: 46px;
padding: 0 10px;
}
.rate:not(:checked) > input {
position:absolute;
top:-9999px;
}
.rate:not(:checked) > label {
float:right;
width:1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:30px;
color:#ccc;
}
.rate:not(:checked) > label:before {
content: '★ ';
}
.rate > input:checked ~ label {
color: #ffc700;
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
color: #deb217;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
color: #c59b08;
} Final Output:
Conclusion:
In conclusion, implementing a 5-star rating system can significantly enhance user experience on your website. By following the step-by-step guide we provided, you can create a simple and amazing 5-star rating using HTML and CSS. Additionally, you can improve user engagement by adding interactivity with JavaScript and using best practices for user interface design. Remember to prioritize the user experience in your web development projects to ensure satisfied and engaged users.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
