Pushbutton-style images and links
If you're new here, you may want to subscribe to my RSS feed. One advantage of subscribing to RSS feeds is that you don't have to constantly re-visit this site to check for updates within specific sections you might be interested in because your browser or Feed reader will do this for you automatically on a regular basis plus you can even get email notification. Thanks for visiting!
[View FULL Article] 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;}Article copyright BookOfTips.Blogspot.Com - Find helpful tips that can help you with your daily activities. All rights reserved. No part of an article may be reproduced without the prior permission.
If you enjoyed this post Subscribe to our feed
