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

Star Rating Widget using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create Star Rating Widget using HTML & CSS only..
I am sure that, you have seen the star rating system or widget on many e-commerce websites and the app. I know that the review widget is dynamic, but their design created in HTML CSS & JavaScript or any JS library. First, designers created the rating or review UI (User Interface), and developers connect it to the database.
As you can see in the image, this is a Star Rating Widget with dynamic text using HTML & CSS. This is a pure CSS program that means there is no Javascript or JS library used in this widget.
You can use this widget in your sites after a few changes in codes according to your requirements. And, I believe you can take this Star Rating Widget at the next level.

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 -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <!-- <title>Star Rating | VikashTech</title> -->
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <div class="center">
      <div class="stars">
        <input type="radio" id="five" name="rate" value="5">
        <label for="five"></label>
        <input type="radio" id="four" name="rate" value="4">
        <label for="four"></label>
        <input type="radio" id="three" name="rate" value="3">
        <label for="three"></label>
        <input type="radio" id="two" name="rate" value="2">
        <label for="two"></label>
        <input type="radio" id="one" name="rate" value="1">
        <label for="one"></label>
        <span class="result"></span>
      </div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.center{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.center .stars{
  height: 150px;
  width: 500px;
  text-align: center;
}
.stars input{
  display: none;
}
.stars label{
  float: right;
  font-size: 100px;
  color: lightgrey;
  margin: 0 5px;
  text-shadow: 1px 1px #bbb;
}
.stars label:before{
  content: 'โ˜…';
}
.stars input:checked ~ label{
  color: gold;
  text-shadow: 1px 1px #c60;
}
.stars:not(:checked) > label:hover,
.stars:not(:checked) > label:hover ~ label{
  color: gold;
}
.stars input:checked > label:hover,
.stars input:checked > label:hover ~ label{
  color: gold;
  text-shadow: 1px 1px goldenrod;
}
.stars .result:before{
  position: absolute;
  content: "";
  width: 100%;
  left: 50%;
  transform: translateX(-47%);
  bottom: -30px;
  font-size: 30px;
  font-weight: 500;
  color: gold;
  font-family: 'Poppins', sans-serif;
  display: none;
}
.stars input:checked ~ .result:before{
  display: block;
}
.stars #five:checked ~ .result:before{
  content: "I love it ๐Ÿ˜";
}
.stars #four:checked ~ .result:before{
  content: "I like it ๐Ÿ˜Ž";
}
.stars #three:checked ~ .result:before{
  content: "It's good ๐Ÿ˜„";
}
.stars #two:checked ~ .result:before{
  content: "I don't like it ๐Ÿ˜’";
}
.stars #one:checked ~ .result:before{
  content: "I hate it ๐Ÿ˜ ";
}

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: