30+ CSS Star Ratings - Free Code + Demos

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

I think this should be accessible, too.

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.

Emoticon Five Star Rating through Fontawesome in pure css

A CSS rating system that changes the facial expression based on how many stars are chosen.

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.

No Javascript, No images, No Icon Fonts.

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

Rating form coding by HTML5/CSS3, not with Javascript.

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", ...

A CSS styled star rating component

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

A couple of thoughts about rating interactions & animations

Rate your posts, articles or whatever with stars, because stars is always cool!

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

A star rating pen with emoji pop-ups :)