Favorite stars

Quick idea for CSS stars – useful for marking something as a favorite…

.star.starred:before {
content: "2605";

.star:before {
content: "2606";

.star {
font-size: 2em;
cursor: pointer;

.star:hover {
text-shadow: 0px 0px 3px yellow;

.star.starred:hover {
text-shadow: 0px 0px 3px red;

Add a little bit of Javascript to toggle the “starred” class:

$('.star').on('click', function() {
if ($(this).is('.starred')) {
// Do something to record that this is favourited

Here’s the results.

Leave a Reply

Your e-mail address will not be published. Required fields are marked *