Creating an interactive and visually appealing star rating system can significantly enhance the user experience on your website. Whether you’re building a review section for a product, service, or any content, a custom star rating system provides users with an intuitive way to express their opinions. In this article, we’ll walk you through the process of creating a beautiful star rating system using only HTML and CSS.
Why Use a Custom Star Rating System?
A custom star rating system can:
- Improve user engagement by providing a simple and attractive way for users to rate content.
- Enhance the aesthetic appeal of your website, making it look more professional.
- Provide valuable feedback from users, helping you understand their preferences and improve your offerings.
Step-by-Step Guide to Creating Your Star Rating System
1. Setting Up the HTML Structure
The first step in creating your star rating system is to set up the basic HTML structure. This involves creating a div element that will contain the star rating elements.
2. Styling with CSS
Next, you’ll apply CSS to style the stars and define their behavior when users interact with them. This includes setting up hover effects, transitions, and the appearance of the stars when selected.
3. Adding Interactivity
Although this tutorial focuses on HTML and CSS, adding JavaScript can enhance interactivity by allowing you to capture the user’s rating and perform actions based on their input. However, with pure CSS, you can still achieve a great level of interactivity.
Benefits of Using HTML and CSS for Your Star Rating System
- Simplicity: Using HTML and CSS makes the star rating system easy to implement and customize without the need for complex coding.
- Performance: A CSS-based solution ensures that your rating system loads quickly and performs efficiently, which is crucial for maintaining a good user experience.
- Customization: You have complete control over the appearance and behavior of the stars, allowing you to tailor them to fit your website’s design perfectly.
Conclusion
Implementing a custom star rating system with HTML and CSS is a straightforward way to enhance your website’s functionality and user engagement. By following the steps outlined in this article, you can create an attractive and interactive rating system that will delight your users.
You can copy the code below to get started on your own custom star rating system. Simply paste it into your HTML and CSS files, and you’ll have a fully functional rating system ready to go.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Star Rating</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Days+One&display=swap');
:root {
--tran: all 0.5s ease 0s;
--dark: #1c2429;
--back: #1d659f;
}
* { outline: none; }
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 50% 50%, var(--back), #11114e);
}
.star:hover,
.star:has(~ .star:hover),
.star:has(:checked),
.star:has(~ .star :checked) {
--star: #ffd900;
}
.number:hover ~ .star:has(~ .star :checked),
.number:hover ~ .star:has(:checked),
.star:hover ~ .star:has(~ .star :checked),
.star:hover ~ .star:has(:checked) {
--star: #1c619c;
}
.number:hover ~ .star:has(~ .star :checked):after,
.number:hover ~ .star:has(:checked):after,
.star:hover ~ .star:has(~ .star :checked):after,
.star:hover ~ .star:has(:checked):after {
clip-path: polygon(28% 55%, 2% 41%, 30% 31%, 36% 1%, 53% 24%, 28% 55%, 35% 62%, 68% 44%, 98% 52%, 73% 68%, 75% 99%, 52% 80%, 24% 91%, 35% 62%);
}
.number:hover ~ .star:has(~ .star :checked),
.number:hover ~ .star:has(:checked),
.star:hover ~ .star:has(~ .star :checked),
.star:hover ~ .star:has(:checked) {
background: var(--dark);
transition: all 0.1s ease 0s;
transition: var(--tran);
}
.star:has(:checked) {
transform: scale(1.25);
transition-timing-function: linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
}
.star-rating {
padding: 2vmin 10vmin 2.25vmin 4vmin;
border-radius: 10vmin;
font-size: 5vmin;
position: relative;
background: var(--dark);
}
.stars {
display: flex;
}
.star {
display: grid;
place-items: center;
padding: 1vmin;
cursor: pointer;
transition: var(--tran);
background: radial-gradient(circle at 50% 50%, #1c5e98 1vmin, #fff0 calc(1vmin + 1px) 100%);
}
.star input,
.star::before,
.star::after {
grid-area: star;
width: 5vmin;
height: 5vmin;
margin: 0 0.5vmin;
}
.star [type="radio"] {
appearance: none;
}
.star::before,
.star::after {
content: "";
width: 100%;
height: 100%;
clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
}
.star::after {
transition: all ease-in-out 130ms;
width: calc(100% - 0.25vmin);
height: calc(100% - 0.25vmin);
background: var(--star);
}
.number-rating:before {
content: "0";
font-family: 'Days One', sans-serif;
display: grid;
place-items: center;
background: #ffd900;
color: var(--dark);
position: absolute;
margin-top: -3.1vmin;
border-radius: 100%;
margin-left: 2vmin;
font-size: 6vmin;
width: 13vmin;
height: 13vmin;
}
body:has(.star:nth-child(2) > input:checked) .star-rating .number-rating:before {
content: "1";
}
body:has(.star:nth-child(3) > input:checked) .star-rating .number-rating:before {
content: "2";
}
body:has(.star:nth-child(4) > input:checked) .star-rating .number-rating:before {
content: "3";
}
body:has(.star:nth-child(5) > input:checked) .star-rating .number-rating:before {
content: "4";
}
body:has(.star:nth-child(6) > input:checked) .star-rating .number-rating:before {
content: "5";
}
body:has(.number:hover) .star-rating .number-rating:before {
content: "0" !important;
}
body:has(.star:nth-child(2):hover) .star-rating .number-rating:before {
content: "1" !important;
}
body:has(.star:nth-child(3):hover) .star-rating .number-rating:before {
content: "2" !important;
}
body:has(.star:nth-child(4):hover) .star-rating .number-rating:before {
content: "3" !important;
}
body:has(.star:nth-child(5):hover) .star-rating .number-rating:before {
content: "4" !important;
}
body:has(.star:nth-child(6):hover) .star-rating .number-rating:before {
content: "5" !important;
}
.number input {
display: none;
}
.number {
right: -5vmin;
top: -1vmin;
z-index: 1;
height: 13vmin;
width: 13vmin;
position: absolute;
cursor: pointer;
border-radius: 100%;
}
.number:before {
--ar: var(--dark);
content: "";
position: absolute;
width: 13vmin;
height: 13vmin;
border-radius: 100%;
transform: rotate(0deg);
background:
radial-gradient(circle at 50% 125%, #fff0 45%, var(--ar) calc(45% + 1px) 50%, #fff0 calc(50% + 1px) 100%),
radial-gradient(circle at 50% -25%, #fff0 45%, var(--ar) calc(45% + 1px) 50%, #fff0 calc(50% + 1px) 100%),
conic-gradient(from -45deg at 50% 60%, var(--ar) 0 25%, #fff0 0 100%),
conic-gradient(from 135deg at 50% 40%, var(--ar) 0 25%, #fff0 0 100%);
background-size: 100% 45%, 100% 45%, 1.75vmin 1.75vmin, 1.75vmin 1.75vmin;
background-repeat: no-repeat;
background-position: 0% -10%, 0% 110%, 90% 52%, 10% 46%;
transition: var(--tran);
opacity: 0.05;
}
.number:hover:before {
transform: rotate(360deg);
opacity: 1;
}
</style>
</head>
<body>
<div class="star-rating">
<div class="stars">
<label class="number"><input type="radio" name="rating" value="0"></label>
<label class="star"><input type="radio" name="rating" value="1"></label>
<label class="star"><input type="radio" name="rating" value="2"></label>
<label class="star"><input type="radio" name="rating" value="3" checked></label>
<label class="star"><input type="radio" name="rating" value="4"></label>
<label class="star"><input type="radio" name="rating" value="5"></label>
<div class="number-rating"></div>
</div>
</div>
</body>
</html>
Remember, the key to a successful web project is continuous learning and experimentation. Don’t hesitate to tweak and customize the code to better suit your needs and aesthetic preferences. Happy coding!
By following this guide, you’ll be able to add a professional and interactive star rating system to your website, enhancing user interaction and feedback collection.