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

当你的鼠标移过本站的链接,尤其是图片的时候你会发现,链接(图片)会有少许的位移,就像按钮被按下的效果。我们知道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;

2 条评论:

任平生 说...

最近怎么没有写些好玩的事情了呢?
全研究代码了……

麦小田 说...

最近你这里好东西真多^_^