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.
If you want to see this emoji star rating widget and how it is created then you can watch a full video tutorial on this program [Pure CSS Emoji Star Rating Widget].
Video Tutorial of Pure CSS Emoji Star Rating Widget
In the video, you have seen the pure CSS emoji star rating and I hope you have understood the codes behind creating this widget. As you know, I used only HTML & CSS to create this rating widget, and all the features of this widget like emoji slide animation, text, and rating number changes. So if you’re a beginner and you know a little bit of knowledge of HTML & CSS then you can easily create this type of widget.
You might like this:
Pure CSS Emoji Star Rating Widget [Source Codes]
To create this program [Star Rating System]. First, you need to create two files one HTML File and another one is CSS File. After creating these files just paste the following codes into your files. You can also download the source code files from the given download button.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on the rating widget won’t appear. You’ve to download files from the given download button to use images also.
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</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>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@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;
}
That’s all, now you’ve successfully created a Pure CSS Emoji Star Rating Widget. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
