Thecuriouscorp· 12 min read
30+ CSS Star Rating Examples
Many businesses nowadays use rating systems to take feedback from the user about their product or service. Rating systems are a must for e-commerce companies. It is an industry-standard. The most user-friendly rating design is star rating which allows users to select amount of stars depicting the value of the service.
Rating widgets can be designed in many unique ways but they must be user-friendly and simple to use. You can also make it interactive to the user with animations and transitions.
Here is a list of beautiful rating UI design which you can implement in your web development project or you can even take ideas from the given examples and make your own.
Pure CSS Star Rating Widget
See the Pen Pure CSS Star Rating Widget by James Barnett (@jamesbarnett) on CodePen.
Author
James Barnett
Link
Made With
HTML / CSS
About The Code
It is a simple star rating widget design that is made only using HTML and CSS. Users can hover over the stars and then select the star according to their choice. It gives a preview of the hover of the stars.
CSS Star Ratings with Radio Buttons
See the Pen CSS Star Ratings with Radio Buttons by Lenny Sirivong (@lsirivong) on CodePen.
Author
Lenny Sirivong
Link
Made With
HTML / SCSS / Js
About The Code
Simple star rating widget with hover animation and default selected ratings.
Angular.js Star Rating Design
See the Pen Angular.js Star Rating Directive by Andrew (@andrewarchi) on CodePen.
Author
Andrew
Link
Made With
HTML / SCSS / Js (Angular js)
About The Code
This rating widget is created with Angular.js and does the basic job.
Percentage Based Star Ratings
See the Pen Percentage based star ratings by Zach Reed (@Bluetidepro) on CodePen.
Author
Zach Reed
Link
Made With
Markdown / Less
About The Code
Star Rating created using Markdown and Less. You can change value of percentage to manipulate stars.
Rating Stars with simple jQuery
See the Pen Rating Stars with simple jQuery by Deepak Kamat (@depy) on CodePen.
Author
Deepak Kamat
Link
Made With
HTML / CSS / jQuery
About The Code
Rating Widget created with jQuery. Simple design implemented in the widget.
Book Store UI with Star Rating
See the Pen Book Store UI by Aysenur Turk (@TurkAysenur) on CodePen.
Author
Aysenur Turk
Link
Made With
HTML / SCSS
About The Code
This entire book store UI with rating system is created using HTML and SCSS.
Bootstrap Star Rating
See the Pen Bootstrap Star Rating by Alí (@alisuarez) on CodePen.
Author
Alí
Link
Made With
HTML / CSS / Js
About The Code
Simple Bootstrap star rating widget design.
Movie Review Rating Widget
See the Pen Movie Card by Andre Madarang (@drehimself) on CodePen.
Author
Andre Madarang
Link
Made With
HTML / CSS / Js
About The Code
Rating with movie card UI.
Simple Rating with Emoticons
See the Pen simple star rating by Mert Cukuren (@knyttneve) on CodePen.
Author
Mert Cukuren
Link
Made With
HTML / SCSS
About The Code
Emoticons appear according to the selected number of stars.
CSS & Radio Button Star Rating
See the Pen CSS & Radio Button Star Rating by Adam Orchard (@orchard) on CodePen.
Author
Adam Orchard
Link
Made With
HTML / Less
About The Code
Minimal design with simple click to select.
Movie Card UI With Pure CSS3 Animation Rating
See the Pen Movie Card Interactive UI With Pure CSS3 Animation Rating by Reece McDonald (@rmcdonalddesigns) on CodePen.
Author
Reece McDonald
Link
Made With
HTML / SCSS / Js
About The Code
Movie rating system with card design template.
Pure CSS 5 Star Rating with Default
See the Pen Pure CSS 5-Star Rating by Andrea Crawford (@andreacrawford) on CodePen.
Author
Andrea Crawford
Link
Made With
HTML / SCSS
About The Code
Star rating widget with default selected stars with pure CSS.
Pet Store Interactive Customer Rating Form
See the Pen Interactive Customer Feedback Form (For a pet store) by Jamie Coulter (@jcoulterdesign) on CodePen.
Author
Jamie Coulter
Link
Made With
HTML / SCSS / Js
About The Code
Very unique design to get feedback from the user. Interaction with the animal to give feedback. Little bit complicated for the user.
CSS/SVG Star Rating
See the Pen CSS/SVG Star Rater by Rogie (@rogie) on CodePen.
Author
Rogie
Link
Made With
HTML / Less / Js
About The Code
Selecting rating on the radio buttons show the text for how much stars are selected.
Stars Rating with Smile Animation
See the Pen Stars rating animation by Aaron Iker (@aaroniker) on CodePen.
Author
Aaron Iker
Link
Made With
Pug / SCSS / Js
About The Code
Cool animation shift of the star with a smile to show bad or good rating.
Pure CSS Rating with Reset Button
See the Pen Rating in pure HTML5/CSS3 by Khoné Vongsouthi (@khone-vongsouthi) on CodePen.
Author
Khoné Vongsouthi
Link
Made With
HTML / Less
About The Code
This widget also comes with reset button to reset it.
Simple Rating for Email
See the Pen Star rating for email by Maxx Scholten (@maxxscholten) on CodePen.
Author
Maxx Scholten
Link
Made With
HTML / CSS
About The Code
Simple widget design with HTML and CSS.
SVG Radio Selector Buttons
See the Pen Pure CSS - SVG Radio Selector Buttons by Nikki Pantony (@nikkipantony) on CodePen.
Author
Nikki Pantony
Link
Made With
HTML / CSS / Js
About The Code
This rating widget comes with emoticon, scripting (pun) and hand sign ratings.
Glowing Stars Rating Widget
See the Pen CSS Unicode Star Rating by Joseph Fusco (@fusco) on CodePen.
Author
Joseph Fusco
Link
Made With
HTML / SCSS
About The Code
Stars glows when user selects the star.
Smile Toggle Rating with Emoticon
See the Pen Smile Toggle | HTML + CSS by Cameron Fitzwilliam (@CameronFitzwilliam) on CodePen.
Author
Cameron Fitzwilliam
Link
Made With
HTML / SCSS
About The Code
This is a simple toggle represents only two ratings, bad or good.
Stand Up Rating Animation
See the Pen Star rating by Giel Berkers (@kanduvisla) on CodePen.
Author
Giel Berkers
Link
Made With
HTML / CSS / Js
About The Code
The radio boxes in this rating system stand up when user hovers over them.
CSS Star Rating using BEM & Font awesome
See the Pen CSS Star rating using BEM & Font awesome by Andriy Shabat (@BlackShabat) on CodePen.
Author
Andriy Shabat
Link
Made With
HTML / CSS
About The Code
This widget uses radio box from font awesome library.
Rating with Smooth Fade
See the Pen CSS-only Star Rating by Marcus Burnette (@mburnette) on CodePen.
Author
Marcus Burnette
Link
Made With
HTML / SCSS
About The Code
This widget has smooth fade transition when selected.
Smooth Fill Animation Rating
See the Pen CSS3 Star Rating by Michael (@michaelord) on CodePen.
Author
Michael
Link
Made With
HTML / Less
About The Code
The radio boxes fill up with color smoothly.
3D Star Rating with Font Awesome
See the Pen Accessible Star Rating with Font Awesome by Chris Pratt (@chrisdpratt) on CodePen.
Author
Chris Pratt
Link
Made With
HTML / CSS / Js
About The Code
The star radio boxes are 3D when clicked.
Simple React Star Rating
See the Pen React star rating by Benjamin Reid (@benjaminreid) on CodePen.
Author
Benjamin Reid
Link
Made With
HTML / SCSS / React
About The Code
This is react widget rating system.
Star Rating Bounce Animation
See the Pen Star Rating Animation by Roxy (@roxy225) on CodePen.
Author
Roxy
Link
Made With
HTML / SCSS / Js
About The Code
The stars jumps when clicked by the user.
Star Rating Widget Bootstrap 4
See the Pen Simple Pure CSS Star Rating Widget Bootstrap 4 by yaworek (@yaworek) on CodePen.
Author
yaworek
Link
Made With
HTML / CSS
About The Code
Bootstrap star rating widget.
Standalone SVG CSS Only Rating component
See the Pen Standalone SVG CSS-only star rating component by Damián Muti (@damianmuti) on CodePen.
Author
Damián Muti
Link
Made With
HTML / CSS / Js
About The Code
SVG class rating system design.
Emotion Face Rating Widget
See the Pen Ratings Inspiration by Tadaima (@tadaima) on CodePen.
Author
Tadaima
Link
Made With
Pug / SCSS / Js
About The Code
This widget changes emotion when clicked on the radio box.
Star Rating with Display and Interaction
See the Pen 03 - Pure CSS 5-Star rating with hover effect for rating entry by Patrick Denny (@AtomicNoggin) on CodePen.
Author
Patrick Denny
Link
Made With
HTML / CSS
About The Code
This rating widget provides radio boxes with display and for interactions as well.