Post thumbnail: 18 CSS Star Ratings

18 CSS Star Ratings

Collection of hand-picked free HTML and CSS star rating code examples.

Demo image: Pure CSS Rating

Author

  • Stas Melnikov

Links

Made with

  • HTML / CSS

About the code

Pure CSS Rating

Pure CSS rating via CSS custom properties as API.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: 5-Star Rating 5-Star Rating - GIF Demo

Author

  • Andrea Crawford

Links

Made with

  • HTML / CSS (SCSS)

About the code

5-Star Rating

Pure CSS 5-star rating.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Standalone SVG CSS-only Star Rating Component

Author

  • Damián Muti

Links

Made with

  • HTML / CSS (SCSS)

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Emoticon Star Rating Emoticon Star Rating - GIF Demo

Author

  • Vineeth.TR

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Emoticon Star Rating

Emoticon five star rating through Font Awesome in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Rate Star Buttons Rate Star Buttons - GIF Demo

Author

  • Valeriya

Links

Made with

  • HTML / CSS (PostCSS)

About the code

Rate Star Buttons

Pure CSS rate star buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Rating System CSS Rating System - GIF Demo

Author

  • Ryan Mulligan

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CSS Rating System

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Pure CSS Star Rating Pure CSS Star Rating - GIF Demo

Author

  • Rachel Bull

Links

Made with

  • HTML / CSS (SCSS)

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Unicode Star Rating CSS Unicode Star Rating - GIF Demo

Author

  • Joseph Fusco

Links

Made with

  • HTML / CSS (SCSS)

About the code

CSS Unicode Star Rating

No Javascript, no images, no icon fonts.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Star Rating for Email Star Rating for Email - GIF Demo

Author

  • Maxx Scholten

Links

Made with

  • HTML / CSS

About the code

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).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Stars for Rating Stars for Rating - GIF Demo

Author

  • Jordan-Simonds

Links

Made with

  • HTML / CSS

About the code

Stars for Rating

Nice star rating with font-awesome.css.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Rating System Rating System - GIF Demo

Author

  • Elton Kamami

Links

Made with

  • HTML / CSS

About the code

Rating System

Only CSS rating system.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Rating in Pure HTML5/CSS3 Rating in Pure HTML5/CSS3 - GIF Demo

Author

  • Khoné Vongsouthi

Links

Made with

  • HTML / CSS (Less)

About the code

Rating in Pure HTML5/CSS3

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Pure CSS Star Rating from 0 to 8 with Colored Points of the Star

Author

  • Jan Wagner

Links

Made with

  • HTML / CSS (Less)

About the code

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Star Rating Widget Star Rating Widget - GIF Demo

Author

  • James Barnett

Links

Made with

  • HTML / CSS

About the code

Star Rating Widget

Pure CSS star rating widget.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Pure CSS3 Rating Pure CSS3 Rating - GIF Demo

Author

  • Renaud Tertrais

Links

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS3 Rating

Flat pure CSS3 rating system.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Ratings Ratings - GIF Demo

Author

  • Timothy M. LeBlanc

Links

Made with

  • HTML / CSS

About the code

Ratings

Stars and hearts ratings.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS3 Star Rating CSS3 Star Rating - GIF Demo

Author

  • Michael

Links

Made with

  • HTML / CSS (Less)

About the code

CSS3 Star Rating

A CSS styled star rating component.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Stars Rating System Stars Rating System - GIF Demo

Author

  • daniesy

Links

Made with

  • HTML / CSS

About the code

Stars Rating System

Full CSS3 only colorful star ratings with inputs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

back to top