Pushbutton-style images and links

In the footer of the posts of this Blog, you will see the social bookmarking icons. If you hover your mouse over them, you will see that they "move" just a bit to the right and down, as if they are pushed down. Read on to learn how this is done.

The movement of the buttons is achieved using CSS. CSS lets you define a so called pseudo-class a:hover. This class contains the layout of the anchor-element <a> when the mouse hovers over it.

The bookmark-icons below have a html-structure like this:
<a href="url"><img src="imagesource"/></a>

We have to wrap it inside a span, with a unique class, for example:
<span class="pushbutton"><a href="url"><img src="imagesource"/></a></span> 

In the css-stylesheet we have to define the following style for the new class:
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}