In this tutorial, we will learn how to create a simple yet powerful star rating with HTML and CSS. With just a few lines of code, you can add this interactive feature to your website or application, allowing users to rate products, services, or content. Whether you want to display the average rating or allow users to provide their own ratings, this tutorial has you covered.
Preview (Star Rating with HTML and CSS)
HTML
<div class="container">
<div class="star-container">
<button class="star star5" data-value="5" onclick="rate(this)"><i class="fas fa-star"></i></button>
<button class="star star4" data-value="4" onclick="rate(this)"><i class="fas fa-star"></i></button>
<button class="star star3" data-value="3" onclick="rate(this)"><i class="fas fa-star"></i></button>
<button class="star star2" data-value="2" onclick="rate(this)"><i class="fas fa-star"></i></button>
<button class="star star1" data-value="1" onclick="rate(this)"><i class="fas fa-star"></i></button>
</div>
<p id="rating">Rate Us :)</p>
</div>First, let’s take a look at the HTML code provided above. The code is wrapped in a div element with a class of “container”. Inside this div, we have another div with a class of “star-container”. This div contains five button elements, each with a class of “star” and a data attribute called “value”. The value of this attribute corresponds to the rating (1-5) for each button.
The button elements also have an onclick attribute that calls a function called “rate”, which will be used to handle the rating functionality. Inside each button, we have an i element with a class of “fas fa-star”, which is used to display a star icon.
Below the “star-container” div, we have a p element with an id of “rating”. This element will be used to display the current rating.
CSS
/* Star Rating with HTML and CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #2C394B;
}
.container {
background: #161120;
padding: 20px 28px;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.star-container {
direction: rtl;
/* Reverse the position od stars */
}
button {
color: #fff;
font-size: 32px;
margin: 4px;
background: transparent;
border: none;
transition: 0.2s;
}
#rating {
color: #fff;
margin-top: 12px;
font-size: 20px;
text-align: center;
}
.container button:hover {
color: rgb(255, 238, 0);
}
.star1:hover ~ .star {
color:rgb(255, 238, 0);
}
.star2:hover ~ .star {
color: rgb(255, 238, 0);
}
.star3:hover ~ .star {
color: rgb(255, 238, 0);
}
.star4:hover ~ .star {
color: rgb(255, 238, 0);
}
.star5:hover ~ .star {
color: rgb(255, 238, 0);
}
.hovered {
color: rgb(255, 238, 0);
}
.hovered ~ .star {
color: rgb(255, 238, 0);
}The first line of code, * { margin: 0; padding: 0; box-sizing: border-box; }, sets default values for the margin, padding, and box-sizing properties of all elements. This ensures that the layout of the page is consistent and that the element’s dimensions are calculated correctly.
.container { background: #161120; padding: 20px 28px; border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.15); }, styles the “container” div element. It sets the background color to a dark purple, adds padding, rounds the corners using the border-radius property, and adds a box shadow using the box-shadow property.
Line of code, .star-container { direction: rtl; }, sets the direction of the “star-container” div to “rtl” (right-to-left). This will reverse the order of the stars.
Code, button { color: #fff; font-size: 32px; margin: 4px; background: transparent; border: none; transition: 0.2s; }, styles the button elements. It sets the color to white, the font size to 32px, adds a 4px margin, removes the background color and border, and adds a 0.2s transition effect.
Congratulations, you have successfully created a star rating with HTML and CSS! With just a few lines of code, you were able to add an interactive and visually appealing feature to your website or application. Whether you want to display the average rating or allow users to provide their own ratings, the techniques covered in this tutorial can be easily customized to fit your needs.
Remember to keep experimenting and testing different styles and functionality to find the perfect solution for your project. And don’t forget to share your creations with the community – we would love to see what you have built!
Here is the Github Repository Link.
Read our other blogs of 15 Days – 15 Projects Series
- Social Media Buttons HTML & CSS
- Create Rock Paper Scissors with JavaScript
- To-Do List with JavaScript
- 8 Must-Have Chrome Extensions for Web Developers
Thank you for following along with this tutorial. I hope it was helpful and that you feel more confident in your ability to create a star rating with HTML and CSS. If you have any questions or comments, feel free to reach out. Happy coding!
Happy Coding!
