Tag Archives: css rating star

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]