Creating a Star Rater using CSS


This is a really good article about how to create a star rating system where you mouse over the stars to register your vote and they light up using only CSS. Flippin sweet! (5 stars, heh.) 🙂

Creating a Star Rater using CSS – Blog – Komodo Media

Creating a Star Rater using CSS

This is my first contribution to the CSS loving community. So, many of you have seen a blog. Many of you have seen comments and reviews on sites such as Netflix and Amazon. Most of these reviews, as in Amazon’s case or Movies, as in Neflix’s case come with a handy dandy rating. I’ve even seen the star rating system used at msn.com. Many of these solutions may use JavaScript or just have an individual hover state for a single star. The question I pose is…. Can you create a star rating using only CSS. I’m talking the kind that when you hover over the 4th star, there are four stars that show up on the hover state. Well, I’m glad you asked because that is just the question I intend to answer.

But! Before we get into the action, I know I like to see a working example first, so here, check this out.

, ,

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

sell diamonds