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.
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.
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.
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.
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.
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.
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.
About The Code
Simple Bootstrap star rating widget design.
Movie Review Rating Widget
See the Pen Movie Card by Andre Madarang (@drehimself) on CodePen.
About The Code
Rating with movie card UI.
Simple Rating with Emoticons
See the Pen simple star rating by Mert Cukuren (@knyttneve) on CodePen.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
About The Code
This is react widget rating system.
Star Rating Bounce Animation
See the Pen Star Rating Animation by Roxy (@roxy225) on CodePen.
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.
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.
About The Code
SVG class rating system design.
Emotion Face Rating Widget
See the Pen Ratings Inspiration by Tadaima (@tadaima) on CodePen.
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.
About The Code
This rating widget provides radio boxes with display and for interactions as well.
Leave a Reply