Pure CSS star rating system with color change

Step 1: Create a star shape

<span class="star"></span>

//color
$lightgray: #D3D3D3;
//mixin
@mixin transition($transition-property, $transition-time, $method) {
  -webkit-transition: $transition-property $transition-time $method;
  -moz-transition: $transition-property $transition-time $method;
  -ms-transition: $transition-property $transition-time $method;
  -o-transition: $transition-property $transition-time $method;
  transition: $transition-property $transition-time $method;
}
@mixin transform($transforms) {
  transform: $transforms;
  -moz-transform: $transforms;
  -ms-transform: $transforms;
  -webkit-transform: $transforms;
}
//mixin star shape
@mixin star-shape($width: $width, $background-color: transparent, $z-index: 0) {
  @include transform(rotate(35deg));
  @include transition(all, .3s, linear);
  border-bottom: $width * .7 solid $background-color;
  border-left: $width solid transparent;
  border-right: $width solid transparent;
  display: inline-block;
  height: 0;
  margin-bottom: $width / 2;
  margin-top: $width / 2;
  position: relative;
  width: 0;
  margin-right: .4em;
  &:before,
  &:after {
    @include transition(all, .3s, linear);
    content: '';
    display: block;
    height: 0;
    position: absolute;
    width: 0;
    z-index: $z-index - 1;
  }
  &:before {
    @include transform(rotate(-35deg));
    border-bottom: $width * .8 solid $background-color;
    border-left: $width * .3 solid transparent;
    border-right: $width * .3 solid transparent;
    left: -$width * .65;
    top: -$width * .45;
  }
  &:after {
    @include transform(rotate(-70deg));
    border-bottom: $width * .7 solid $background-color;
    border-left: $width solid transparent;
    border-right: $width solid transparent;
    left: -$width * 1.05;
    top: $width * .03;
  }
}
.star-rating {
  text-align: center;
 }
.star {
  @include star-shape(1.8em, $lightgray);
}

Step 2 : Create star rating using radio buttons

<div class="star-rating">
  <h3>Star rating</h3>
  <div class="rating">
    <input type="radio" id="star5" name="rating" value="5" class="radio-1" />
    <label for="star5" class="star star-1" title="Excellent"></label>
    <input type="radio" id="star4" name="rating" value="4" class="radio-2" />
    <label for="star4" class="star star-2" title="Great"></label>
    <input type="radio" id="star3" name="rating" value="3" class="radio-3" />
    <label for="star3" class="star star-3" title="Average"></label>
    <input type="radio" id="star2" name="rating" value="2" class="radio-4" />
    <label for="star2" class="star star-4" title="Poor"></label>
    <input type="radio" id="star1" name="rating" value="1" class="radio-5" />
    <label for="star1" class="star star-5" title="Bad"></label>
  </div>
</div>

//color
$lightgray: #D3D3D3;
//mixin
@mixin transition($transition-property, $transition-time, $method) {
  -webkit-transition: $transition-property $transition-time $method;
  -moz-transition: $transition-property $transition-time $method;
  -ms-transition: $transition-property $transition-time $method;
  -o-transition: $transition-property $transition-time $method;
  transition: $transition-property $transition-time $method;
}
@mixin transform($transforms) {
  transform: $transforms;
  -moz-transform: $transforms;
  -ms-transform: $transforms;
  -webkit-transform: $transforms;
}
//mixin star shape
@mixin star-shape($width: $width, $background-color: transparent, $z-index: 0) {
  @include transform(rotate(35deg));
  @include transition(all, .3s, linear);
  border-bottom: $width * .7 solid $background-color;
  border-left: $width solid transparent;
  border-right: $width solid transparent;
  display: inline-block;
  height: 0;
  margin-bottom: $width / 2;
  margin-top: $width / 2;
  position: relative;
  width: 0;
  margin-right: .4em;
  &:before,
  &:after {
    @include transition(all, .3s, linear);
    content: '';
    display: block;
    height: 0;
    position: absolute;
    width: 0;
    z-index: $z-index - 1;
  }
  &:before {
    @include transform(rotate(-35deg));
    border-bottom: $width * .8 solid $background-color;
    border-left: $width * .3 solid transparent;
    border-right: $width * .3 solid transparent;
    left: -$width * .65;
    top: -$width * .45;
  }
  &:after {
    @include transform(rotate(-70deg));
    border-bottom: $width * .7 solid $background-color;
    border-left: $width solid transparent;
    border-right: $width solid transparent;
    left: -$width * 1.05;
    top: $width * .03;
  }
}
.star-rating {
  text-align: center;
 }
.star {
  @include star-shape(1.8em, $lightgray);
}
.rating {
  display: inline-block;
  position: relative;
  input[type="radio"] {
    position: absolute;
    opacity: 0;
    height: 1px;
    width: 1px;
    bottom: 0;
  }
}

Taadaa.. Good job! You have done it. you can refer our CodePen.

Happy Coding!

Go back Home.