M/s VIKASH TECH - We Write Imaginations to Codes..!!

Pure CSS Emoji Star Rating Widget

Hey friends, today in this blog you’ll learn how to create Emoji Star Rating Widget using only HTML & CSS.
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’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar - www.vikashtech.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emoji Stars Rating | VikashTech</title> 
    <link rel="stylesheet" href="blog.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="smiley3.png" alt=""></li> 
           <li><img src="smiley.png" alt=""></li> 
           <li><img src="smiley2.png" alt=""></li> 
           <li><img src="smiley3.png" alt=""></li> 
           <li><img src="smiley.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

@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;
}


Category :

Comments

No comments found.

….

FLAT 50% OFF

Latest Posts

SuiteCRM, an open source tool for startups to use from an early stage.

When we talk about businesses in their early stage, it's quite a big deal to choose good management and sales…

How to Implement Google QAuth Authentication | Google Login - PHP MySQL

PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…

How to use Google Two Factor Authentication in your project?

At our end we take security at a priority, implementation of different ways to secure website should be the priority…

How to verify an email address before sending emails?

Email marketing is a great way to reach your clients, but while sending emails from a mail service provider, its…

%d bloggers like this: