上一篇为大家介绍了一下关于菜单效果的制作,本篇为大家再分享一下关于水晶按钮的实现,本篇我们将不会再涉及javascript的知识,所有效果我们都将同css来实现,内容没有什么难度,学完本篇我相信大家对css的强大,一定会感到赞叹的,废话不多说,下面我们先来看一下效果:
上图中的最上面的三个按钮效果是通过css改变input标签来实现的,下面两个则是两个a标签,通过css来改变相应的样式,下面我们一起来学习一下上面的效果。
一、按钮设置:
在界面上添加三个input按钮:
css代码:
input{ width: 100px; height: 40px; border: none; background-image: url(button/btn.png);}
这样的效果存在的问题就是,我们的背景是固定的,不能随我们的内容增加而改变。
二、a标签的效果的显示:
a标签:
按钮
css代码:
a{ text-decoration: none; padding-left: 15px; display: inline-table; width: 100px; height: 40px; line-height: 40px; background: url(button/btn_bg.png);} a:HOVER{ backgr