CSS Star Rating System Example Free Download

Here we are showing you how to create simple CSS star rating system. This is pure CSS solution to create a simple five star rating widget using Html radio inputs and CSS3.
Star ratings are one of those classic UX patterns that everyone has tinkered with at one time or another. I had an idea get the UX part of it done with very little code of css and using fontawesome.

Here i am introducing three type of star rating buttons small, medium and large.

HTML Code For : CSS Star Rating small buttons

<!-- Header -->
<header>
<div class="header-inner wrapper wrapper-center clearfix">
<h1>CSS Star Rating</h1>
<h3>Simple and easy to use css rating or review widget</h3>
</div>
</header>

<!-- Small -->
<section class="row">
<div class="section-inner">
<div class="wrapper wrapper-center clearfix">
<h2>Small</h2>
</div>
</div>

<div class="section-inner">
<div class="wrapper clearfix">
<!-- No Checked Stars -->
<div class="one-half-first">No Checked Stars</div>

<div class="one-half">
<div class="css-star-rating">
<input type="radio" id="star-p1" value="5">
<label for="star-p1"><span>Awesome</span></label>

<input type="radio" id="star-p2" value="4">
<label for="star-p2"><span>Excellent</span></label>

<input type="radio" id="star-p3" value="3">
<label for="star-p3"><span>Good</span></label>

<input type="radio" id="star-p4" value="2">
<label for="star-p4"><span>Fair</span></label>

<input type="radio" id="star-p5" value="1">
<label for="star-p5"><span>Poor</span></label>
</div>
</div>

<!-- Half & Full Stars -->
<div class="one-half-first">Half & Full Stars</div>

<div class="one-half">
<div class="css-star-rating">
<input type="radio" id="star-c1" value="5">
<label for="star-c1"><span>5 Stars</span></label>

<input type="radio" id="star-c2" value="4.5">
<label class="star-half" for="star-c2"><span>4.5 Stars</span></label>

<input type="radio" id="star-c3" value="4">
<label for="star-c3"><span>4 Stars</span></label>

<input type="radio" id="star-c4" value="3.5">
<label class="star-half" for="star-c4"><span>3.5 Stars</span></label>

<input type="radio" id="star-c5" value="3">
<label for="star-c5"><span>3 Stars</span></label>

<input type="radio" id="star-c6" value="2.5">
<label class="star-half" for="star-c6"><span>2.5 Stars</span></label>

<input type="radio" id="star-c7" value="2">
<label for="star-c7"><span>2 Stars</span></label>

<input type="radio" id="star-c8" value="1.5" checked>
<label class="star-half" for="star-c8"><span>1.5 Stars</span></label>

<input type="radio" id="star-c9" value="1">
<label for="star-c9"><span>1 Star</span></label>

<input type="radio" id="star-c0" value="0.5">
<label class="star-half" for="star-c0"><span>0.5 Stars</span></label>

</div>
</div>

<!-- Full Stars Only -->
<div class="one-half-first">Full Stars Only</div>

<div class="one-half">
<div class="css-star-rating">
<input type="radio" id="star-x1" value="5">
<label for="star-x1"><span>Awesome</span></label>

<input type="radio" id="star-x2" value="4">
<label for="star-x2"><span>Excellent</span></label>

<input type="radio" id="star-x3" value="3" checked>
<label for="star-x3"><span>Good</span></label>

<input type="radio" id="star-x4" value="2">
<label for="star-x4"><span>Fair</span></label>

<input type="radio" id="star-x5" value="1">
<label for="star-x5"><span>Poor</span></label>
</div>
</div>

<!-- Blue Stars -->
<div class="one-half-first">Blue Stars</div>

<div class="one-half">
<div class="css-star-rating blue">
<input type="radio" id="star-d1" value="5">
<label for="star-d1"><span>5 Stars</span></label>

<input type="radio" id="star-d2" value="4.5">
<label class="star-half" for="star-d2"><span>4.5 Stars</span></label>

<input type="radio" id="star-d3" value="4">
<label for="star-d3"><span>4 Stars</span></label>

<input type="radio" id="star-d4" value="3.5">
<label class="star-half" for="star-d4"><span>3.5 Stars</span></label>

<input type="radio" id="star-d5" value="3">
<label for="star-d5"><span>3 Stars</span></label>

<input type="radio" id="star-d6" value="2.5" checked>
<label class="star-half" for="star-d6"><span>2.5 Stars</span></label>

<input type="radio" id="star-d7" value="2">
<label for="star-d7"><span>2 Stars</span></label>

<input type="radio" id="star-d8" value="1.5">
<label class="star-half" for="star-d8"><span>1.5 Stars</span></label>

<input type="radio" id="star-d9" value="1">
<label for="star-d9"><span>1 Star</span></label>

<input type="radio" id="star-d0" value="0.5">
<label class="star-half" for="star-d0"><span>0.5 Stars</span></label>
</div>
</div>

<!-- Green Stars -->
<div class="one-half-first">Green Stars</div>
<div class="one-half">
<div class="css-star-rating green">
<input type="radio" id="star-e1" value="5">
<label for="star-e1"><span>5 Stars</span></label>

<input type="radio" id="star-e2" value="4.5">
<label class="star-half" for="star-e2"><span>4.5 Stars</span></label>

<input type="radio" id="star-e3" value="4" checked>
<label for="star-e3"><span>4 Stars</span></label>

<input type="radio" id="star-e4" value="3.5">
<label class="star-half" for="star-e4"><span>3.5 Stars</span></label>

<input type="radio" id="star-e5" value="3">
<label for="star-e5"><span>3 Stars</span></label>

<input type="radio" id="star-e6" value="2.5">
<label class="star-half" for="star-e6"><span>2.5 Stars</span></label>

<input type="radio" id="star-e7" value="2">
<label for="star-e7"><span>2 Stars</span></label>

<input type="radio" id="star-e8" value="1.5">
<label class="star-half" for="star-e8"><span>1.5 Stars</span></label>

<input type="radio" id="star-e9" value="1">
<label for="star-e9"><span>1 Star</span></label>

<input type="radio" id="star-e0" value="0.5">
<label class="star-half" for="star-e0"><span>0.5 Stars</span></label>
</div>
</div>

<!-- Purple Stars -->
<div class="one-half-first">Purple Stars</div>
<div class="one-half">
<div class="css-star-rating purple">
<input type="radio" id="star-f1" value="5">
<label for="star-f1"><span>5 Stars</span></label>

<input type="radio" id="star-f2" value="4.5">
<label class="star-half" for="star-f2"><span>4.5 Stars</span></label>

<input type="radio" id="star-f3" value="4">
<label for="star-f3"><span>4 Stars</span></label>

<input type="radio" id="star-f4" value="3.5">
<label class="star-half" for="star-f4"><span>3.5 Stars</span></label>

<input type="radio" id="star-f5" value="3">
<label for="star-f5"><span>3 Stars</span></label>

<input type="radio" id="star-f6" value="2.5">
<label class="star-half" for="star-f6"><span>2.5 Stars</span></label>

<input type="radio" id="star-f7" value="2">
<label for="star-f7"><span>2 Stars</span></label>

<input type="radio" id="star-f8" value="1.5" checked>
<label class="star-half" for="star-f8"><span>1.5 Stars</span></label>

<input type="radio" id="star-f9" value="1">
<label for="star-f9"><span>1 Star</span></label>

<input type="radio" id="star-f0" value="0.5">
<label class="star-half" for="star-f0"><span>0.5 Stars</span></label>
</div>
</div>

<!-- Red Stars -->
<div class="one-half-first">Red Stars</div>
<div class="one-half">
<div class="css-star-rating red">
<input type="radio" id="star-a1" value="5">
<label for="star-a1"><span>5 Stars</span></label>

<input type="radio" id="star-a2" value="4.5">
<label class="star-half" for="star-a2"><span>4.5 Stars</span></label>

<input type="radio" id="star-a3" value="4">
<label for="star-a3"><span>4 Stars</span></label>

<input type="radio" id="star-a4" value="3.5">
<label class="star-half" for="star-a4"><span>3.5 Stars</span></label>

<input type="radio" id="star-a5" value="3" checked>
<label for="star-a5"><span>3 Stars</span></label>

<input type="radio" id="star-a6" value="2.5">
<label class="star-half" for="star-a6"><span>2.5 Stars</span></label>

<input type="radio" id="star-a7" value="2">
<label for="star-a7"><span>2 Stars</span></label>

<input type="radio" id="star-a8" value="1.5">
<label class="star-half" for="star-a8"><span>1.5 Stars</span></label>

<input type="radio" id="star-a9" value="1">
<label for="star-a9"><span>1 Star</span></label>

<input type="radio" id="star-a0" value="0.5">
<label class="star-half" for="star-a0"><span>0.5 Stars</span></label>
</div>
</div>

<!-- Black Stars -->
<div class="one-half-first">Black Stars</div>

<div class="one-half">
<div class="css-star-rating black">
<input type="radio" id="star-b1" value="5">
<label for="star-b1"><span>5 Stars</span></label>

<input type="radio" id="star-b2" value="4.5">
<label class="star-half" for="star-b2"><span>4.5 Stars</span></label>

<input type="radio" id="star-b3" value="4">
<label for="star-b3"><span>4 Stars</span></label>

<input type="radio" id="star-b4" value="3.5" checked>
<label class="star-half" for="star-b4"><span>3.5 Stars</span></label>

<input type="radio" id="star-b5" value="3">
<label for="star-b5"><span>3 Stars</span></label>

<input type="radio" id="star-b6" value="2.5">
<label class="star-half" for="star-b6"><span>2.5 Stars</span></label>

<input type="radio" id="star-b7" value="2">
<label for="star-b7"><span>2 Stars</span></label>

<input type="radio" id="star-b8" value="1.5">
<label class="star-half" for="star-b8"><span>1.5 Stars</span></label>

<input type="radio" id="star-b9" value="1">
<label for="star-b9"><span>1 Star</span></label>

<input type="radio" id="star-b0" value="0.5">
<label class="star-half" for="star-b0"><span>0.5 Stars</span></label>
</div>
</div>
</div>
</div>
</section>

HTML Code For : CSS Star Rating medium buttons

<!-- Medium -->
<section class="row row-darker">
 <div class="section-inner">
 <div class="wrapper wrapper-center clearfix">
 <h2>Medium</h2> 
 </div>
 </div>
 
 <div class="section-inner">
 <div class="wrapper clearfix">
 <!-- Medium Full Stars -->
 <div class="one-half-first">Medium Full Stars</div>
 <div class="one-half">
 <div class="css-star-rating medium"> 
 <input type="radio" id="ms1" value="5">
 <label for="ms1"><span>Awesome</span></label>
 
 <input type="radio" id="ms2" value="4">
 <label for="ms2"><span>Excellent</span></label>
 
 <input type="radio" id="ms3" value="3" checked>
 <label for="ms3"><span>Good</span></label>
 
 <input type="radio" id="ms4" value="2">
 <label for="ms4"><span>Fair</span></label>
 
 <input type="radio" id="ms5" value="1">
 <label for="ms5"><span>Poor</span></label>
 </div>
 </div>
 
 <!-- Medium Half & Full Stars -->
 <div class="one-half-first">Medium Half & Full Stars</div>
 
 <div class="one-half">
 <div class="css-star-rating medium red">
 
 <input type="radio" id="mhalf-1" value="5">
 <label for="mhalf-1"><span>5 Stars</span></label>
 
 <input type="radio" id="mhalf-2" value="4.5">
 <label class="star-half" for="mhalf-2"><span>4.5 Stars</span></label>
 
 <input type="radio" id="mhalf-3" value="4">
 <label for="mhalf-3"><span>4 Stars</span></label>
 
 <input type="radio" id="mhalf-4" value="3.5" checked>
 <label class="star-half" for="mhalf-4"><span>3.5 Stars</span></label>
 
 <input type="radio" id="mhalf-5" value="3">
 <label for="mhalf-5"><span>3 Stars</span></label>
 
 <input type="radio" id="mhalf-6" value="2.5">
 <label class="star-half" for="mhalf-6"><span>2.5 Stars</span></label>
 
 <input type="radio" id="mhalf-7" value="2">
 <label for="mhalf-7"><span>2 Stars</span></label>
 
 <input type="radio" id="mhalf-8" value="1.5">
 <label class="star-half" for="mhalf-8"><span>1.5 Stars</span></label>
 
 <input type="radio" id="mhalf-9" value="1">
 <label for="mhalf-9"><span>1 Star</span></label>
 
 <input type="radio" id="mhalf-0" value="0.5">
 <label class="star-half" for="mhalf-0"><span>0.5 Stars</span></label>
 </div>
 </div>
 
 <!-- Medium Green Stars -->
 <div class="one-half-first">Medium Green Stars</div>
 <div class="one-half">
 <div class="css-star-rating medium green">
 <input type="radio" id="gs1" value="5">
 <label for="gs1"><span>5 Stars</span></label>
 
 <input type="radio" id="gs2" value="4" checked>
 <label for="gs2"><span>4 Stars</span></label>
 
 <input type="radio" id="gs3" value="3">
 <label for="gs3"><span>3 Stars</span></label>
 
 <input type="radio" id="gs4" value="2">
 <label for="gs4"><span>2 Stars</span></label>
 
 <input type="radio" id="gs5" value="1">
 <label for="gs5"><span>1 Star</span></label>
 </div>
 </div>
 </div>
 </div>
</section> 

HTML Code For : CSS Star Rating large buttons

<!-- Large -->
<section class="row">
<div class="section-inner">
<div class="wrapper wrapper-center clearfix">
<h2>Large</h2>
</div>
</div>

<div class="section-inner">
<div class="wrapper clearfix">
<!-- Large Full Stars -->
<div class="one-half-first">Large Full Stars</div>
<div class="one-half">
<div class="css-star-rating large">
<input type="radio" id="ls1" value="5">
<label for="ls1"><span>Awesome</span></label>

<input type="radio" id="ls2" value="4">
<label for="ls2"><span>Excellent</span></label>

<input type="radio" id="ls3" value="3">
<label for="ls3"><span>Good</span></label>

<input type="radio" id="ls4" value="2" checked>
<label for="ls4"><span>Fair</span></label>

<input type="radio" id="ls5" value="1">
<label for="ls5"><span>Poor</span></label>
</div>
</div>

<!-- Large Half & Full Stars -->
<div class="one-half-first">Large Half & Full Stars</div>
<div class="one-half">
<div class="css-star-rating large blue">

<input type="radio" id="lghalf-1" value="5">
<label for="lghalf-1"><span>5 Stars</span></label>

<input type="radio" id="lghalf-2" value="4.5">
<label class="star-half" for="lghalf-2"><span>4.5 Stars</span></label>

<input type="radio" id="lghalf-3" value="4">
<label for="lghalf-3"><span>4 Stars</span></label>

<input type="radio" id="lghalf-4" value="3.5">
<label class="star-half" for="lghalf-4"><span>3.5 Stars</span></label>

<input type="radio" id="lghalf-5" value="3">
<label for="lghalf-5"><span>3 Stars</span></label>

<input type="radio" id="lghalf-6" value="2.5" checked>
<label class="star-half" for="lghalf-6"><span>2.5 Stars</span></label>

<input type="radio" id="lghalf-7" value="2">
<label for="lghalf-7"><span>2 Stars</span></label>

<input type="radio" id="lghalf-8" value="1.5">
<label class="star-half" for="lghalf-8"><span>1.5 Stars</span></label>

<input type="radio" id="lghalf-9" value="1">
<label for="lghalf-9"><span>1 Star</span></label>

<input type="radio" id="lghalf-0" value="0.5">
<label class="star-half" for="lghalf-0"><span>0.5 Stars</span></label>
</div>
</div>

<!-- Large Purple Stars -->
<div class="one-half-first">Large Purple Stars</div>
<div class="one-half">
<div class="css-star-rating large purple">
<input type="radio" id="lg1" value="5">
<label for="lg1"><span>5 Stars</span></label>

<input type="radio" id="lg2" value="4" checked>
<label for="lg2"><span>4 Stars</span></label>

<input type="radio" id="lg3" value="3">
<label for="lg3"><span>3 Stars</span></label>

<input type="radio" id="lg4" value="2">
<label for="lg4"><span>2 Stars</span></label>

<input type="radio" id="lg5" value="1">
<label for="lg5"><span>1 Star</span></label>
</div>
</div>
</div>
</div>
</section>

CSS Code For: CSS Star Rating

<style>
.css-star-rating{position:relative;display:inline-block;border:none;font-size:14px}
.css-star-rating label,.css-star-rating label span,.css-star-rating label:before{-webkit-user-select:none; -moz-user-select:none;user-select:none}
.css-star-rating label{position:relative;float:right;color:#C8C8C8}
.css-star-rating input{ border:0;width:1px;height:1px;overflow:hidden;position:absolute !important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);opacity:0}
.css-star-rating label:before{margin:3px;font-size:1.1em;font-family:FontAwesome;display:inline-block;content:"\f005"} 
.css-star-rating .star-half:before{position:absolute;content:"\f089"}
.css-star-rating:hover label:hover,.css-star-rating:hover label:hover ~ label,.css-star-rating input:checked ~ label{color:#FFB801}
.css-star-rating:hover label:hover ~ label{color:#FFED85}
.css-star-rating label,.css-star-rating:hover label,.css-star-rating:hover input ~ label{color:#DBE3E6}
.css-star-rating label span{position:absolute;top:-80px;left:-9999px;z-index:10;display:block;opacity:0;padding:2px 10px;font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:bold;background:#000;color:#fff;white-space:nowrap;-webkit-border-radius:3px; -moz-border-radius:3px;border-radius:3px;-webkit-transition:margin 0.6s,opacity 0.6s; -moz-transition:margin 0.6s,opacity 0.6s;transition:margin 0.6s,opacity 0.6s}
.css-star-rating label:hover span{top:-28px;left:-5px;opacity:1}
.css-star-rating label span:before{content:'';position:absolute;border-top:4px solid #000;border-right:4px solid transparent;border-left:4px solid transparent;left:10px;top:100%}
.css-star-rating.medium label:before{font-size:1.6em;margin:4px}
.css-star-rating.medium label:hover span{top:-31px;left:0}
.css-star-rating.large label:before{font-size:2.17em;margin:5px}
.css-star-rating.large label:hover span{top:-33px;left:5px}
/* Red */
.css-star-rating.red:hover label:hover,.css-star-rating.red:hover label:hover ~ label,.css-star-rating.red input:checked ~ label{color:#EA6153}
.css-star-rating.red:hover label:hover ~ label{color:#F99}
.css-star-rating.green:hover label:hover,.css-star-rating.green:hover label:hover ~ label,.css-star-rating.green input:checked ~ label{color:#1FDEB8}
.css-star-rating.green:hover label:hover ~ label{color:#93F0DD}
.css-star-rating.blue:hover label:hover,.css-star-rating.blue:hover label:hover ~ label,.css-star-rating.blue input:checked ~ label{color:#438FFD}
.css-star-rating.blue:hover label:hover ~ label{color:#9BCDEE}
.css-star-rating.purple:hover label:hover,.css-star-rating.purple:hover label:hover ~ label,.css-star-rating.purple input:checked ~ label{color:#9B59B6}
.css-star-rating.purple:hover label:hover ~ label{color:#D3B7DF}
.css-star-rating.black:hover label:hover,.css-star-rating.black:hover label:hover ~ label,.css-star-rating.black input:checked ~ label{color:#3D566E}
.css-star-rating.black:hover label:hover ~ label{color:#7B99B7}
@media screen and (-webkit-min-device-pixel-ratio:0){
 .css-star-rating{-webkit-animation:bugfix infinite 1s}
 @-webkit-keyframes bugfix{from{padding:0}to{padding:0}}
}
</style>