New Zenner
- Join Date:
- Jun 2011
- Posts:
- 2
- Plugin Contributions:
- 0
Create a rollover effect for a ‘BuyNow’ button
I am trying to create a rollover effect for a ‘BuyNow’ button using the ‘Ashley Pink’ template.
I have managed to create a rollover effect for the ‘ProductDescription’ button using CSS in the ‘stylesheet.css’ but having a tough time with the ‘BuyNow’ button.
See my web: http://www.pothijarnhandmade.com/index.php?main_page=index&cPath=2&zenid=90it8ofiad1fio9lppg0f79fm6
I changed the ‘stylesheet.css’ for the ‘ProductDescription’ button by inserting this:
.product_detail a {
float:right;
background-image: url(../images/detailsX.gif);
}
.product_detail a:hover {
float:right;
background-image: url(../images/detailsY.gif);
}
From:
.product_detail {float:right;}
The ‘BuyNow’ button did not have anything in ‘stylesheet.css’ so I created:
.listingBuyNowButton a {
background-image: url(../images/buynowX.gif);
}
.listingBuyNowButton a:hover {
background-image: url(../images/buynowY.gif);
}
As I believe the class is defined as ‘listingBuyNowButton’.
<img src="includes/templates/ashley_pink/buttons/english/button_buy_now.gif" alt="Buy Now" title=" Buy Now " width="81" height="18" class="listingBuyNowButton">
But I can not get a rollover effect for the ‘BuyNow’ button.
Any help with making a rollover effect for the ‘BuyNow’ button would be cool!!!