<div class="star-rating">
  <input id="star-5" type="radio" name="rating" value="star-5" />
  <label for="star-5" title="5 stars">
    <i class="active fa fa-star" aria-hidden="true"></i>
  </label>
  <input id="star-4" type="radio" name="rating" value="star-4" />
  <label for="star-4" title="4 stars">
    <i class="active fa fa-star" aria-hidden="true"></i>
  </label>
  <input id="star-3" type="radio" name="rating" value="star-3" />
  <label for="star-3" title="3 stars">
    <i class="active fa fa-star" aria-hidden="true"></i>
  </label>
  <input id="star-2" type="radio" name="rating" value="star-2" />
  <label for="star-2" title="2 stars">
    <i class="active fa fa-star" aria-hidden="true"></i>
  </label>
  <input id="star-1" type="radio" name="rating" value="star-1" />
  <label for="star-1" title="1 star">
    <i class="active fa fa-star" aria-hidden="true"></i>
  </label>
</div>

<h2>
  <a href="https://codepen.io/muhammad_mabrouk/pen/vYpENjy" target="_blank">New Version Here</a>
</h2>

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-content: space-around;
  flex-wrap: wrap;
  background-color: #333;

  h2 {
    width: 100%;
    text-align: center;

    a {
      color: skyblue;
    }
  }
}

// Exciting Part
// ====================
.star-rating {
  direction: rtl;
  display: inline-block;
  padding: 20px;
  cursor: default;

  input[type="radio"] {
    display: none;
  }

  label {
    color: #bbb;
    font-size: 2rem;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }

  label:hover,
  label:hover ~ label,
  input[type="radio"]:checked ~ label {
    color: #f2b600;
  }
}