Categories
CSS Web development

CSS Star Rating

CSS Star Rating

Star rating is used by reviewers for ranking things like products, films, restaurants, or hotels (usually, five stars being the highest rating).

Demo:

To create the CSS Star Rating follow the steps below:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

Create the stat container and add five stars:

<div class="star-rating">Star Rating:
<div class="starOne">&#x2605;</div>
<div class="starTwo">&#x2605;</div>
<div class="starThree">&#x2605;</div>
<div class="starFour">&#x2605;</div>
<div class="starFive">&#x2605;</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.star-rating {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
}

Style the stars:

.starOne, .starTwo, .starThree, .starFour, .starFive {
  position: relative;
  top:-5px;
}

.starOne, .starTwo, .starThree {
  color: #e9c46a;
}

.starFour, .starFive {
  color: #333;
}

.starFour:before {
    content: '\2605';
    position: absolute;
    display: flex;
    color: #e9c46a;
    margin-left: 0;
    width: 26px;
    overflow: hidden;
}

Enjoy coding!

Read also:

CSS & jQuery Calculator

How to create Image Hover Overlay Effect (slide, fade)?

How to create the Comparison Slider?