Star Rating Widget using only HTML & CSS

2
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 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 on your sites after a few changes in codes according to your requirements. And, I believe you can take this Star Rating Widget to 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]

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 the following codes in your file. 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.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <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>

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/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 ";
}

That’s all, now you’ve successfully created a Star Rating Widget using only HTML & CSS
. If your code not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Previous articleCool Login Form in HTML CSS & JavaScript
Next articlePassword Show Hide Button in HTML CSS & JavaScript

RELATED ARTICLESMORE FROM AUTHOR

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here