CSS Star Rating System Example Free Download

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>
Mukesh Jakhar - PHP Web Developer
Mukesh Jakhar

This is Mukesh Jakhar. I’m a professional web developer with 3+ years experience. I am always ready for freelance work and i am writing blogs in my free time. I love to learn new technologies and share with others.

I founded PHPKIDA in September 2015. The focus of this website to provide web development tutorials of PHP, WordPress, CodeIgniter, Jquery, MySQL, HMTL, CSS etc and sharing solution to problems which i already solved.

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.