CSS Star Rating

Top 7 CSS Star Rating Buttons

This is a CSS-only component that dynamically generates Star Rating Buttons.

SVG star rating widget with and half star input boxes. The half stars (like 4.5) highlights on hover and on selection.

Made by Samia Ruponti

June 15, 2017

See the Pen SVG star rating with half stars by Samia Ruponti (@samia92) on CodePen.

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.

Made by Damián Muti

May 29, 2017

See the Pen Standalone SVG CSS-only star rating component by Damián Muti (@damianmuti) on CodePen.

HTML and CSS(PostCSS) rate star buttons.

Made by Valeriya

July 14, 2016

See the Pen Rate star buttons (pure css) by Valeriya (@wwwebneko) on CodePen.

Form with iconified radio buttons, using unicode characters.

Made by Ron Gilmour

March 25, 2016

See the Pen Star ratings survey form by Ron Gilmour (@rgilmour) on CodePen.


Replaces radio button group with filled in stars. This allows you to use a normal radio button form and simply submit the selected value.

Made by Lenny Sirivong

March 25, 2015

See the Pen Star ratings survey form by Ron Gilmour (@rgilmour) on CodePen.

Star buttons with HTML and CSS.

Made by Jordan-Simonds

December 4, 2014

See the Pen stars by Jordan-Simonds (@jexordexan) on CodePen.

CSS star rating with HTML and CSS(LESS).

Made by Adam Orchard

July 17, 2014

See the Pen CSS & Radio Button Star Rating by Adam Orchard (@orchard) on CodePen.

Praveen Kumar

I am a fullstack web developer with a passion for SEO, creating stunning websites, and organic marketing. I am a perfectionist.

Post navigation