Pure CSS Star Rating System With Color Change — codementor.tech

For full specification please go through THIS link.

https://www.codementor.tech/pure-css-star-rating-system-with-color-change/

Step 1: Create a star shape

HTML:

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

SCSS:

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

Codepen

https://codepen.io/jankiatyantik03/pen/VBwBJZ

Step 2 : Create star rating using radio buttons

HTML:

<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>

SCSS:

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

Codepen

https://codepen.io/jankiatyantik03/pen/XBWPXo

Step 3 : Create different colors stars (on hover and checked radio stars)

HTML:

<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>

SCSS:

//color
$black: #000000;
$white: #ffffff;
$lightgray: #D3D3D3;
$red: #FF5254;
$orange: #FF6C35;
$yellow: #FF9900;
$green: #3F9E37;
$dark-green:#14892c;
//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;
}
.rating {
  display: inline-block;
  position: relative;
  input[type="radio"] {
    position: absolute;
    opacity: 0;
    height: 1px;
    width: 1px;
    bottom: 0;
  }
}
// star shape
.star {
  @include star-shape(1.8em, $lightgray);
  float: right;
}
//with different color
$colors: $dark-green,
$green,
$yellow,
$orange,
$red;
@for $i from length($colors) through 1 {
  .star-#{$i} {
    &.active,
    &.active ~ .star {
      border-bottom-color: nth($colors, $i);
      &:before,
      &:after {
        border-bottom-color: nth($colors, $i);
      }
    }
  }
  input[type="radio"] + .star-#{$i} {
    cursor: pointer;
    &:hover,
    &:hover ~ .star {
      border-bottom-color: nth($colors, $i);
      &:before,
      &:after {
        border-bottom-color: nth($colors, $i);
      }
    }
  }
  .rating:not(:hover) {
    .radio-#{$i}:checked ~ .star {
      border-bottom-color: nth($colors, $i);
      &:before,
      &:after {
        border-bottom-color: nth($colors, $i);
      }
    }
  }
}

Codepen

https://codepen.io/jankiatyantik03/pen/WKegxJ

It’s done. Cheers!

Happy Coding!