Hey friends, today in this blog you'll learn how to create Emoji Star Rating Widget using only HTML & CSS. In the previous blog, I've shared how to create Custom Emoji Range Slider in JavaScript and it's time to create Star Rating with Emojis.
As you may know, A star rating is a rating question or widget that provides people a rate of an app, product, service, or something else with several stars. The number of stars can range from 5 to 10 stars. In this design [Pure CSS Emoji Star Rating Widget], there is a big white box that holds the emojis, stars, and rating numbers. When you rate with particular stars then the emoji change according to your rating and the bottom text and the rating number also changed.
You can copy the codes from the given boxes or download the code files from the given link because you won't get images if you only copy-paste the codes So I recommend you download the source code files instead of copying codes. Click here to download code files.
You might like this:
Custom Emoji Range Slider
Awesome Pagination Design
Custom Star Rating Box Design
Simple pure CSS Star Rating Widget
HTML CODE:
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Emoji Stars Rating | CodingNepal</title> -->
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="wrapper">
<input type="radio" name="rate" id="star-1">
<input type="radio" name="rate" id="star-2">
<input type="radio" name="rate" id="star-3">
<input type="radio" name="rate" id="star-4">
<input type="radio" name="rate" id="star-5">
<div class="content">
<div class="outer">
<div class="emojis">
<!-- <li class="slideImg"><img src="emojis/emoji-1.png" alt=""></li> -->
<!-- <li><img src="emojis/emoji-2.png" alt=""></li> -->
<!-- <li><img src="emojis/emoji-3.png" alt=""></li> -->
<!-- <li><img src="emojis/emoji-4.png" alt=""></li> -->
<!-- <li><img src="emojis/emoji-5.png" alt=""></li> -->
</div>
</div>
<div class="stars">
<label for="star-1" class="star-1 fas fa-star"></label>
<label for="star-2" class="star-2 fas fa-star"></label>
<label for="star-3" class="star-3 fas fa-star"></label>
<label for="star-4" class="star-4 fas fa-star"></label>
<label for="star-5" class="star-5 fas fa-star"></label>
</div>
</div>
<div class="footer">
<span class="text"></span>
<span class="numb"></span>
</div>
</div>
</body>
</html>
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(#FED151, #DE981F);
}
.wrapper{
background: #f6f6f6;
max-width: 360px;
width: 100%;
border-radius: 10px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper .content{
padding: 30px;
display: flex;
align-items: center;
flex-direction: column;
}
.wrapper .outer{
height: 135px;
width: 135px;
overflow: hidden;
}
.outer .emojis{
height: 500%;
display: flex;
flex-direction: column;
}
.outer .emojis li{
height: 20%;
width: 100%;
list-style: none;
transition: all 0.3s ease;
}
.outer li img{
height: 100%;
width: 100%;
}
#star-2:checked ~ .content .emojis .slideImg{
margin-top: -135px;
}
#star-3:checked ~ .content .emojis .slideImg{
margin-top: -270px;
}
#star-4:checked ~ .content .emojis .slideImg{
margin-top: -405px;
}
#star-5:checked ~ .content .emojis .slideImg{
margin-top: -540px;
}
.wrapper .stars{
margin-top: 30px;
}
.stars label{
font-size: 30px;
margin: 0 3px;
color: #ccc;
}
#star-1:hover ~ .content .stars .star-1,
#star-1:checked ~ .content .stars .star-1,
#star-2:hover ~ .content .stars .star-1,
#star-2:hover ~ .content .stars .star-2,
#star-2:checked ~ .content .stars .star-1,
#star-2:checked ~ .content .stars .star-2,
#star-3:hover ~ .content .stars .star-1,
#star-3:hover ~ .content .stars .star-2,
#star-3:hover ~ .content .stars .star-3,
#star-3:checked ~ .content .stars .star-1,
#star-3:checked ~ .content .stars .star-2,
#star-3:checked ~ .content .stars .star-3,
#star-4:hover ~ .content .stars .star-1,
#star-4:hover ~ .content .stars .star-2,
#star-4:hover ~ .content .stars .star-3,
#star-4:hover ~ .content .stars .star-4,
#star-4:checked ~ .content .stars .star-1,
#star-4:checked ~ .content .stars .star-2,
#star-4:checked ~ .content .stars .star-3,
#star-4:checked ~ .content .stars .star-4,
#star-5:hover ~ .content .stars .star-1,
#star-5:hover ~ .content .stars .star-2,
#star-5:hover ~ .content .stars .star-3,
#star-5:hover ~ .content .stars .star-4,
#star-5:hover ~ .content .stars .star-5,
#star-5:checked ~ .content .stars .star-1,
#star-5:checked ~ .content .stars .star-2,
#star-5:checked ~ .content .stars .star-3,
#star-5:checked ~ .content .stars .star-4,
#star-5:checked ~ .content .stars .star-5{
color: #fd4;
}
.wrapper .footer{
border-top: 1px solid #ccc;
background: #f2f2f2;
width: 100%;
height: 55px;
padding: 0 20px;
border-radius: 0 0 10px 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer span{
font-size: 17px;
font-weight: 400;
}
.footer .text::before{
content: "Rate your experience";
}
.footer .numb::before{
content: "0 out of 5";
}
#star-1:checked ~ .footer .text::before{
content: "I just hate it";
}
#star-1:checked ~ .footer .numb::before{
content: "1 out of 5";
}
#star-2:checked ~ .footer .text::before{
content: "I don't like it";
}
#star-2:checked ~ .footer .numb::before{
content: "2 out of 5";
}
#star-3:checked ~ .footer .text::before{
content: "This is awesome";
}
#star-3:checked ~ .footer .numb::before{
content: "3 out of 5";
}
#star-4:checked ~ .footer .text::before{
content: "I just like it";
}
#star-4:checked ~ .footer .numb::before{
content: "4 out of 5";
}
#star-5:checked ~ .footer .text::before{
content: "I just love it";
}
#star-5:checked ~ .footer .numb::before{
content: "5 out of 5";
}
input[type="radio"]{
display: none;
}
Top comments (1)
Great tutorial! I appreciate how you broke down each step, making it easy to follow. The explanation of form validation is especially helpful, as it ensures user inputs are correct before submission. I am a student of Best International Schools in Bangalore. Would love to see more examples like this for other types of elements. Keep up the good work!