For full specification please go through THIS link.

https://www.programmingschool.io/pure-css-star-rating-system/

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!

LEAVE A REPLY

Please enter your comment!
Please enter your name here