Create UI for rating bar star using CSS

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style>
 div.stars{
 width: 100%;
 display: inline;
 }

 input.star{
 display: none;
 }

 label.star{
 float:right;
 padding: 10px;
 font-size: 36px;
 color: #444;
 transition: all 0.2s;
 cursor: pointer;
 }

 input.star:checked ~ label.star:before{
 content: '\f005';
 color:#FD4;
 transition: all 0.25s;
 }

 label.star:before{
   content:'\f006';
   font-family: FontAwesome;
 }

 label.star:hover{
   transform: rotate(-15deg) scale(1.3);
 }
 </style>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body>

 <div class="stars">
 <form action="">
 <input class="star star5" type="radio" id="start-5" name="star"/>
 <label for="start-5" class="star start-5"></label>
 <input class="star star4" type="radio" id="start-4" name="star"/>
 <label for="start-4" class="star start-4"></label>
 <input class="star star3" type="radio" id="start-3" name="star"/>
 <label for="start-3" class="star start-3"></label>
 <input class="star star2" type="radio" id="start-2" name="star"/>
 <label for="start-2" class="star start-2"></label>
 <input class="star star1" type="radio" id="start-1" name="star"/>
 <label for="start-1" class="star start-1"></label>
 </form>
 </div>

</body>
</html>

डिप्लोमा इन ऑफिस मैनेजमेंट एण्ड अकाउटिंग

Full Stack Web Development with Laravel

Affiliate Program

Create UI for rating bar star using CSS

Contact us

Mail us

Website