带有按钮效果的图片或链接

当你的鼠标移过本站的链接，尤其是图片的时候你会发现，链接（图片）会有少许的位移，就像按钮被按下的效果。我们知道CSS中有一个事件是a:hover，它用来定义鼠标经过链接时所发生的效果，我们定义当鼠标经过时，将链接向下、向右各移一个像素，那么当鼠标经过的时候的效果看起来就像按钮被按下了。
如果想单独让某一个链接出现这样的效果，我们可以用Span来设定某一个特定的链接
1.在CSS中添加以下定义，“pushbutton”是唯一的ID，可以自定义，只要不与模板中其它ID重复。
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}

2.在链接上添加Span，例如：＜span class="pushbutton"＞＜a href="url"＞＜img src="imagesource"/＞＜/a＞＜/span＞

如果我们要让整个模板中的链接都实现这样的效果，可以在模板中所有出现a:hover　的地方添加属性：position: relative; top: 1px; left: 1px;