实现超链接像按钮被按下的效果

如何实现超链接像按钮被按下的效果？【来源：网络搜集整理】

比如，当你移动到一个超链接上的时候，超链接的文字或是图片就会想被按下去一样。这种效果如何实现呢？

我们知道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;

好了，试一下吧

个人实践成功