Rating Counter CSS
Rating Counter CSS

Hy guys, In this tutorial we will create an animated Rating Counter using CSS. We can use this rating counter to give ratings on products or profiles etc.

we have a basic rating counter with animation. We will use only HTML & CSS so it will be easy to understand. In this counter, we have implemented hover effects. All the colors and font sizes can be changed using variables.

Rating Counter CSS

As we mentioned, we will use only HTML & CSS, so let’s start with our index.html file code.

index.html

<!DOCTYPE html>
<head>
  <title>Rating Counter CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="rating-stars">
    <input type="radio" name="rating" id="rs1" checked ><label for="rs1"></label>
    <input type="radio" name="rating" id="rs2"><label for="rs2"></label>
    <input type="radio" name="rating" id="rs3"><label for="rs3"></label>
    <input type="radio" name="rating" id="rs4"><label for="rs4"></label>
    <input type="radio" name="rating" id="rs5"><label for="rs5"></label>
    <span class="rating-counter"></span>
  </div>
</body>
</html>


Here we are using a div with a “rating-stars” class as a parent container for our design. We have also used the radio button because the radio button can select a single value at a time.

style.css

:root{
  --bgColor: #FFFFFF;
  --shadoColor: rgba(0,0,0,0.1);
  --starPreColor: #DDDDDD;
  --starPostColor1: yellow;
  --starPostColor2: orange;
  --counterTextColor: #FFFFFF;
  --counterTextSize: 25px;
  --counterBgColor: #000000;
}
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bgColor);
  
}

body * {
    box-sizing: border-box;
}

.rating-stars {
  display: block;
  width: 50vmin;
  padding: 1.75vmin 10vmin 2vmin 3vmin;
  box-shadow: 0px 0px 8px 5px var(--shadoColor);
  border-radius: 5vmin;
  position: relative;
}

.rating-counter {
  font-size: var(--counterTextSize);
    font-family: Arial, Helvetica, serif;
    color: var(--counterTextColor);
    width: 10vmin;
    text-align: center;
    background: var(--counterBgColor);
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    border-radius: 0 5vmin 5vmin 0;
    line-height: 10vmin;
}

.rating-counter:before {
  content: "0";
  transition: all 0.25s ease 0s;  
}

input { display: none; }

label {
  width: 5vmin;
  height: 5vmin;
  display: inline-flex;
  cursor: pointer;
  background-color: var(--starPreColor);
  margin: 0.5vmin 0.65vmin;
  transition: all 1s ease 0s; 
  clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
}

label[for=rs0] {
  display: none;
}

label:before {
  width: 90%;
  height: 90%;
  content: "";
  z-index: -1;
  display: block;
  margin-left: 5%;
  margin-top: 5%;
  clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
  background: linear-gradient(90deg, var(--starPostColor1), var(--starPostColor2) 30% 50%, var(--starPreColor) 50%, 70%, var(--starPreColor) 100%); 
  background-size: 205% 100%;
  background-position: 0 0;
}

label:hover:before {
  transition: all 0.25s ease 0s;   

}

input:checked + label ~ label:before {
  background-position: 100% 0;
  transition: all 0.25s ease 0s;  
}

input:checked + label ~ label:hover:before {
  background-position: 0% 0
}

#rs1:checked ~ .rating-counter:before {
  content: "1";
}

#rs2:checked ~ .rating-counter:before {
  content: "2";
}

#rs3:checked ~ .rating-counter:before {
  content: "3";
}

#rs4:checked ~ .rating-counter:before {
  content: "4";
}

#rs5:checked ~ .rating-counter:before {
  content: "5";
}

label + input:checked ~ .rating-counter:before {
  color: var(--counterTextColor); !important;
  transition: all 0.25s ease 0s;
}

label:hover ~ .rating-counter:before {
  color: #9aacc6 !important;
  transition: all 0.5s ease 0s; 
  animation: pulse 1s ease 0s infinite;
}

@keyframes pulse {
    50% { font-size: 6.25vmin; }
}

label[for=rs1]:hover ~ .rating-counter:before {
  content: "1" !important;
}

label[for=rs2]:hover ~ .rating-counter:before {
  content: "2" !important;
}

label[for=rs3]:hover ~ .rating-counter:before {
  content: "3" !important;
}

label[for=rs4]:hover ~ .rating-counter:before {
  content: "4" !important;
}

label[for=rs5]:hover ~ .rating-counter:before {
  content: "5" !important;
}


input:checked:hover ~ .rating-counter:before {
  animation: none !important;
  color: #ffab00 !important ;
}


As we mentioned earlier, we are using variables to change the color of our design.

:root{
  --bgColor: #FFFFFF;
  --shadoColor: rgba(0,0,0,0.1);
  --starPreColor: #DDDDDD;
  --starPostColor1: yellow;
  --starPostColor2: orange;
  --counterTextColor: #FFFFFF;
  --counterTextSize: 25px;
  --counterBgColor: #000000;
}


Explanation of each and every variable:

–bgColor is used to set the color for the background.

–shadowColor is used to show the shadow of our rating bar.

–starPreColor is used to give the primary color for our rating stars as light gray.

–starPostColor1 and –starPostColor2 are used to give gradient color when the hover effect is applied on the star and it clicked.

–counterTextColor is used to give color to our counting numbers.

–counterTextSize is used to set the size of our counting number texts.

–counterBgColor is used to give the background color to the counting numbers.

Hope you guys enjoyed this tutorial!

If you are having any issues with the code, then you can visit our GitHub Account. Click Here!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply