how to solve this css issue? - html

Question

I am having some css issues...
When you hover over a product from here, you can see 'show now'..
But when you hover over the product from here, you can see 'Addto Cart' and you also see some black background for 'Add To Cart' which I am not understanding..
May I know what still I have to add in CSS..?
here is my code that displays products:
<!-- Product List -->
<div class="pl">
[product.each]
<div class="t1 col3">
<ul class="products ribbon">
<li class="product">
<a href="[product.link]">
<div class="thumbnail">
<img width="150" height="150" src="[product.image direct='1' tag='0']" class="attachment-shop_catalog wp-post-image" alt="[product.name]" title="[product.name]">
<div class="thumb-shadow"></div>
<strong class="below-thumb">[product.name]</strong>
</div>
<span class="price">
<span class="amount">
<?php if ($product->saleprice > 0 && $product->saleprice < $product->price) { ?>
<div class="prc">
<small>
<span style="text-decoration: line-through; color:blue;">[product.currency mode='sign'][product.price]</span>&nbsp&nbsp
<span style="font-weight: bold; color:red;">[product.currency mode='sign'][product.saleprice]</span>
</small>
</div>
<?php } else { ?>
<div class="prc">
<small>
<span style="font-weight: bold; color:blue;">[product.currency mode='sign'][product.price]</span>
</small>
</div>
<?php } ?>
</span>
</span>
</a>
<div class="buttons" style="opacity: 0; visibility: visible; overflow: hidden; height: 41px; ">
SHOP NOW
</div>
</li>
</ul>
</div> <!-- t1 col3 #end -->
[/product.each]
<div class="clearingdiv"> </div>
</div>
<!-- /Product List -->
so, please tell me what am I missing..? you can find CSS code in source code...

Answer 1

They have used a background image.
In your case you need to set a background to .buttons or the anchor in there.
BTW: please stop using inline-stylsheets; use a separate <style> block or an external CSS file instead. That way, your CSS is much easier to read and understand.