.rating {
      overflow: hidden;
      display: inline-block;
  }
  .rating-input {
      float: right;
      width: 16px;
      height: 16px;
      padding: 0;
      margin: 0 0 0 -16px;
      opacity: 0;
  }

.rating:hover .rating-star:hover,
  .rating:hover .rating-star:hover ~ .rating-star,
  .rating-input:checked ~ .rating-star {
      background-position: 0 0;
  }

   .rating-star,
  .rating:hover .rating-star {
    position: relative;
      display: block;
    float: right;
      width: 16px;
      height: 16px;
      background: url('https://www.everythingfrontend.com/samples/star-rating/star.png') 0 -16px;
  }
   /*///////////////////////////////////////*/ 
    
    /********************Button 1*******************/
.box-1
{
  width:60px;
  height:20px;
  background: rgb(200,200,200) ;
  position:relative;
  margin-bottom:20px;
}

.box-1 input{
  position:absolute;
  width:100%;
  height:100%;
  cursor:pointer;
  opacity:0;
  z-index:999;
}

.box-1 .toogle{
  display:block;
  position:absolute;
  z-index:998;
  width:30px;
  height:100%;
  background: grey;
  top:0;
  box-shadow:0px 0px 3px rgb(50,50,50) inset;
  -webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
	transition: all 0.2s ease;
  text-align:center;
}
.box-1 .toogle:before{
  content:"ON";
  color: #fff;
  text-shadow: 1px 1px #000;
  font-family:tahoma;
  font-size: 11px;
}

.box-1 input:checked ~ .toogle{
  margin-left:30px;
}
.box-1 input:checked + .toogle:before{
  content:"OFF";
}

/*Animations*/
@keyframes button4{
  25%{transform: translateX(0);}
  50%{transform: translateX(-8px);}
}

@-webkit-keyframes button4{
  25%{transform: translateX(0);}
  50%{transform: translateX(-8px);}
}