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>

Author: 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 of problems which i already solved.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts: You may like

20 awesome css3 hover effects social icons

Rotating Words with CSS Animations

Pure CSS Loader and spinners animation

Pure css drop down menu

Pure css dropdown navigation bar

Simple Mobile Navigation Free Download

Pure css social media icons free download

CSS navigation bar with icons

html invoice email template free download

CSS3 flip animation on hover example free download

PHPKIDA Offering Free Tools:

INSTA DOWNLOADER

Free online tool to download Instagram videos, photos and save Instagram videos, photos to your device. It's free & easy to use.

Download Now

CURRENCY CONVERTER

Our real time currency converter calculator will convert your money based on current values from around the world. It's free & easy to use.

Convert Now

ROBOST.TXT GEN.

Create robots txt file that help search engines to crawling and indexing your site with help of our free online Robots.txt Generator tool.

Create Now

HTML MINIFIER

Free online tool to minify or compress html code and reduce the size of html code in few clicks. It's free & easy to use.

Minify Now

CSS MINIFIER

Free online tool to minify or compress css code and reduce the size of css code in few clicks. It's free & easy to use.

Minify Now

JAVASCRIPT MINIFIER

Free online tool to minify or compress javascript code and reduce the size of javascript code in few clicks. It's free & easy to use.

Minify Now

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.