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. Previously I have shared a Responsive Cards with Hover Effect using HTML CSS, now it's time to create a Star Rating Widget with dynamic text using HTML & CSS.

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 difficult to understand what I am saying. You can watch a full video tutorial on this program (Star Rating Widget).

Video Tutorial of Star Rating Widget using HTML & CSS

I hope you liked this program (Star Rating Widget) and understood the basic codes and concepts of this widget. If you like this Star Rating Widget and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Star Rating Widget using HTML & CSS [Source Codes]

As always, before sharing the codes of this program (Star Rating Widget). Let's a few talk about the main tags and codes of this widget. With the help of the radio tag, I created these stars clickable. I used some emojis to look text attractive and the stars shown in the video are also emojis.

Due to the radio tag it possible to make this text dynamic, that means when you click on the particular star the text will show according to your rating.

There are many things I left. Because I can't say all things in writing. I'm just talking about the main codes of this program. But, don't worry you'll understand all codes and programs after getting the source code of this Star Rating Widget.

To create this program (Star Rating Widget). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>Star Rating | CodingNepal</title> -->
    <link rel="stylesheet" href="style.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 FILE:

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

Video Tutorial of Star Rating Widget using HTML & CSS

Star Rating Widget using HTML & CSS [Source Codes]

Thanks for visiting, Keep visiting.

2 Comments

Post a Comment

About Us

Contact Form

Star Rating Widget using only HTML & CSS

Video Tutorial of Star Rating Widget using HTML & CSS

Star Rating Widget using HTML & CSS [Source Codes]

Thanks for visiting, Keep visiting.

You might like

2 Comments

Post a Comment

Contact Form