CSS - Rollover / Fixed Position

Since I know that I will position the button fixed to the top left of the screen I can place the html for the button in my website footer, I can place it anywhere it doesn't matter.



<div id="shop">
<a href="/shop/"><img src="/static/50ec6cd6e4b0b0518bc6333a/50f556e3e4b0c61109871aa2/50f556e4e4b0c61109871b91/1294159386373/shop_squarespace.png/1000w"></a>


This html creates a <div> named #shop. Inside #shop is a link containing my  image and the url I want it to link to.

Next we position and style the button with CSS:


CSS Code

#shop { display: block; position: fixed; top: 200px; left: 0px; width: 50px; height: 150px; background: url(/storage/images_design/shop.png) no-repeat; }

#shop a { display: block; }
#shop img { width: 50px; height: 150px; }
* html a:hover { visibility: visible; }
#shop a:hover img { visibility: hidden; }