Rating Star with CSS

Rating Star with CSS

Hi folks, In this post I just describing about how to create rating star with CSS. You can create the mouseover effects verry easly with css. Only the functionality you have to add. Just try this.

1) HTML

<body>
<div class="star1">
<div class="star2">
<div class="star3">
<div class="star4">
<div class="star5">
</div>
</div>
</div>
</div>
</div>
</body>

2) CSS

.star1 {
width:126px;
height:126px;
background:url(images/gray_star.png) no-repeat;
}
.star2 {
width:126px;
height:126px;
background:url(images/gray_star.png) no-repeat;
margin-left:126px;
}
.star3 {
width:126px;
height:126px;
background:url(images/gray_star.png) no-repeat;
margin-left:126px;
}
.star4 {
width:126px;
height:126px;
background:url(images/gray_star.png) no-repeat;
margin-left:126px;
}
.star5 {
width:126px;
height:126px;
background:url(images/gray_star.png) no-repeat;
margin-left:126px;
}
.star1:hover {
background:url(images/gold_star.png) no-repeat;
}
.star2:hover {
background:url(images/gold_star.png) no-repeat;
}
.star3:hover {
background:url(images/gold_star.png) no-repeat;
}
.star4:hover {
background:url(images/gold_star.png) no-repeat;
}
.star5:hover {
background:url(images/gold_star.png) no-repeat;
}
/* The image icon you have to replace with your own and width and height too. */

3) Demo

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

3 thoughts on “Rating Star with CSS”

  1. Hi Biju,

    Thanks for the star rating.

    Building my first ever site with html5.

    Also, I like your webpage design.

    regards,

    Tama

Leave a Reply

Your email address will not be published. Required fields are marked *