CSS Unicode Star Rating Mixin

CSS Unicode Star Rating Mixin.markdown

CSS Unicode Star Rating Mixin

No Javascript, No images, No Icon Fonts.

A Pen by Joseph Fusco on CodePen.

License.

index.html

<div class="rating">

 <input type="radio" name="rating" id="r1">
 <label for="r1"></label>
 
 <input type="radio" name="rating" id="r2">
 <label for="r2"></label>
 
 <input type="radio" name="rating" id="r3">
 <label for="r3"></label>
 
 <input type="radio" name="rating" id="r4">
 <label for="r4"></label>

 <input type="radio" name="rating" id="r5">
 <label for="r5"></label>
 
</div>

style.scss

@mixin star-rating(
 $filled-color: #F9BF3B,
 $empty-color: #444,
 $size: 80px,
 $width: 400px
 ){
  
 $star--filled        : ★;
 $star--empty         : ☆;
 width: $width;
  
 > * {
  float: right;
 }

 // optional initial pulse of stars
 @at-root{
   @keyframes pulse {
   50% {
     color: lighten($empty-color, 10%);
     text-shadow: 0 0 15px lighten($empty-color, 20%);
   }
  }
 }
 
 label {
  height: 40px;
  width: 20%;
  display: block;
  position: relative;
  cursor: pointer;
  @for $i from 5 through 1 {
    &:nth-of-type(#{$i}):after {
      $animation-delay: $i * .05s;
      animation-delay: $animation-delay;
    }
  }
  &:after {
   transition: all 0.4s ease-out;
   -webkit-font-smoothing: antialiased;
   position: absolute;
   content: '#{$star--empty}';
   color: $empty-color;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   text-align: center;
   font-size: $size;
   animation: 1s pulse ease;
  }
  &:hover:after {
   color: lighten($empty-color, 10%);
   text-shadow: 0 0 15px lighten($empty-color, 10%);
  }
 }

 input {
  display: none;
  &:checked{
   + label:after, ~ label:after{
    content: '#{$star--filled}';
    color: $filled-color;
    text-shadow: 0 0 20px $filled-color;
   }
  }
 }
}

.rating {
 margin: 50px auto;
 @include star-rating();
}

body {
 background-color: #222;
}