30+ CSS Star Ratings - Free Code + Demos
Collection of 30+ CSS Star Ratings. All items are 100% free and open-source.
1. Simple Star Rating
Author: Mert Cukuren (knyttneve)
Links: Source Code / Demo, Dribbble Shot
Created on: June 20, 2019
Made with: HTML, SCSS
Tags: css, css rating, pure css rating, rating
2. Pure CSS Star Ratings
When I first started working on this pen, I had simply felt inspired by another pen involving ratings. Little did I know it was actually part of a #codepenchallenge. While working on this, I would recall the days of browsing message boards powered by IPB, vBulletin, and MyBB. So I wanted ...Read More
Author: Rock Starwind (seto89)
Links: Source Code / Demo
Created on: May 11, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, rating, codepenchallenge, cpc-stars
3. Star Rating In Pure CSS
I think this should be accessible, too.
Author: Christopher Kirk-Nielsen (chriskirknielsen)
Links: Source Code / Demo
Created on: September 6, 2018
Made with: HTML, SCSS
Tags: cpc-stars, codepenchallenge
4. Pure CSS Rating Via CSS Custom Properties As API
Author: Stas Melnikov (melnik909)
Links: Source Code / Demo
Created on: April 7, 2018
Made with: HTML, CSS
5. Pure CSS 5-Star Rating
Author: Andrea Crawford (andreacrawford)
Links: Source Code / Demo
Created on: July 27, 2017
Made with: HTML, SCSS
6. Standalone SVG CSS-only Star Rating Component
This is a CSS-only component that dynamically generates each of the SVG icons to be used as background images for each of the stars. For the rating value to be displayed , "data-rating-value" HTML attribute must be updated and calculated rounding every 0.25 to reflect the proper rating.
Author: Damián Muti (damianmuti)
Links: Source Code / Demo
Created on: May 24, 2017
Made with: HTML, SCSS, JS
Tags: rating-stars, css-only, svg, component
7. Emoticon Star Rating
Emoticon Five Star Rating through Fontawesome in pure css
Author: Vineeth.TR (vineethtr)
Links: Source Code / Demo
Created on: August 11, 2016
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: emoticon, rating, star, pure css rating, fontawesome
8. Rate Star Buttons (Pure CSS)
Author: Valeriia (wwwebneko)
Links: Source Code / Demo
Created on: July 14, 2016
Made with: HTML, PostCSS
Tags: rate, stars, rate animation, estimate, rating
9. How Are You?
A CSS rating system that changes the facial expression based on how many stars are chosen.
Author: Ryan Mulligan (hexagoncircle)
Links: Source Code / Demo
Created on: January 27, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, rating, input, checked, radio
10. Pure CSS Star Rating
Star ratings made with pure css. Stars will highlight on hover and you can also click on the star rating and display that rating. Made form input fields so the form can be processed.
Author: Rachel Bull (rachel_web)
Links: Source Code / Demo
Created on: November 19, 2015
Made with: HTML, SCSS
Tags: star-rating, pure-css, css star ratings, stars, hover stars
11. CSS Unicode Star Rating
No Javascript, No images, No Icon Fonts.
Author: Joseph Fusco (fusco)
Links: Source Code / Demo
Created on: May 4, 2015
Made with: HTML, SCSS
Tags: star-rating, css, text-shadow, fancy radio buttons
12. Star Rating For Email
A star rating system that works in email clients (including Gmail!) Hovering over the stars fills in the correct amount. Each star is an anchor tag which can then be linked to different rating URLs (ex: http://www.example.com?rating=5). This rating system depends on the General Sibling se...Read More
Author: Maxx Scholten (maxxscholten)
Links: Source Code / Demo, Www.example.com
Created on: March 26, 2015
Made with: HTML
Tags: rating, star, email, rating-system
13. Stars
Author: Jordan-Simonds (jexordexan)
Links: Source Code / Demo
Created on: December 2, 2014
Made with: HTML, CSS
Tags: rating, star, starring, flags, ui
14. Full Css3 Only Colorful Star Ratings \w Inputs
Author: daniesy (daniesy)
Links: Source Code / Demo
Created on: June 25, 2013
Made with: HTML, CSS
Tags: stars, ratings, css3, colorful
15. Rating In Pure HTML5/CSS3
Rating form coding by HTML5/CSS3, not with Javascript.
Author: Khoné Vongsouthi (khone-vongsouthi)
Links: Source Code / Demo
Created on: February 1, 2014
Made with: HTML, Less
Tags: html5, css3, rating, form, star
16. Pure CSS Star Rating From 0 To 8 With Colored Points Of The Star
You can rate from "0" to "8" in 0.5 steps. Just change the class of the div to "zero", "zero half", "one", "one half", ...
Author: Jan Wagner (janwagner)
Links: Source Code / Demo
Created on: November 24, 2013
Made with: HTML, Less
Tags: rating, star, css3
17. Pure CSS Star Rating Widget
Author: James Barnett (jamesbarnett)
Links: Source Code / Demo
Created on: October 24, 2013
Made with: HTML, CSS
Tags: purecss
18. Flat CSS3 Rating System
Author: Renaud Tertrais (renaudtertrais)
Links: Source Code / Demo
Created on: September 30, 2013
Made with: HTML, SCSS, JS
Tags: css3, flat, icon, pure-css, design
19. CSS3 Star Rating
A CSS styled star rating component
Author: Michael (michaelord)
Links: Source Code / Demo
Created on: July 3, 2013
Made with: HTML, Less
Tags: rating, stars, css
20. Full Css3 Only Colorful Star Ratings \w Inputs
Author: daniesy (daniesy)
Links: Source Code / Demo, Lea.verou.me
Created on: June 25, 2013
Made with: HTML, CSS
Tags: stars, ratings, css3, colorful
21. Star Rating Animation
Author: Roxy (roxy225)
Links: Source Code / Demo
Created on: September 23, 2015
Made with: HTML, SCSS, JS
Tags: css, animation, star, star-rating
22. Percentage Based Star Rating With Font Awesome
I was working on a personal recipes website and wanted to add a simple percentage based star rating using Font Awesome icons. It needed to work in a way that I could add the rating percentage for each recipe to the html and make it reflect in the stars. There probably must be similar or ...Read More
Author: Filcp (filcp)
Links: Source Code / Demo
Created on: May 19, 2017
Made with: HTML, SCSS, JS
Tags: star-rating, font-awesome, percentage, stars, text-shadow
23. Half-Star Rating
Author: Charlotte Dann (pouretrebelle)
Links: Source Code / Demo
Created on: July 30, 2013
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: trick
24. Stars & Heart Rating
Author: Crystal (s_crystal)
Links: Source Code / Demo
Created on: June 30, 2015
Made with: HTML, CSS
Tags: star, rating, оценка, heart
25. Ratings Inspiration
A couple of thoughts about rating interactions & animations
Author: Tadaima (tadaima)
Links: Source Code / Demo
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
26. Star Rating
Rate your posts, articles or whatever with stars, because stars is always cool!
Author: Arnau Lacambra (naulacambra)
Links: Source Code / Demo
Created on: February 24, 2015
Made with: HTML, CSS, JS
Tags: rating, stars, jquery, css
27. Rate Star Buttons (Pure CSS)
Author: Valeriia (wwwebneko)
Links: Source Code / Demo
Created on: July 14, 2016
Made with: HTML, PostCSS
Tags: rate, stars, rate animation, estimate, rating
28. CSS Ratings
A Yelp Styled Rating System using jQuery. You can apply this in your web application's form and it will submit the rating values too. The CSS is unnecessary except for only the top values that I have specified, and the bottom part where I style the icons. I'm making this for a bigger proj...Read More
Author: thee (Betich)
Links: Source Code / Demo
Made with: HTML, SCSS, JS
29. Star Rating
A star rating pen with emoji pop-ups :)
Author: Souleste (Souleste)
Links: Source Code / Demo
Created on: July 1, 2019
Made with: HTML, CSS, JS
Tags: star, rating, star-ratings, star-rating
More Awesome Lists:
Share: