水晶按钮_html/css

来源：动视网责编：小OO 时间：2020-11-27 16:03:39

水晶按钮_html/css

上图中的最上面的三个按钮效果是通过css改变input标签来实现的，下面两个则是两个a标签，通过css来改变相应的样式，下面我们一起来学习一下上面的效果。　一、按钮设置。在界面上添加三个input按钮。；　css代码。input{ width： 100px；height： 40px；border： none；background-image： url(button/btn.png)；}。这样的效果存在的问题就是，的背景是固定的，不能随的内容增加而改变。　二、a标签的效果的显示。a标签。按钮。css代码。

推荐度：

点击下载本文 文档为doc格式

导读上图中的最上面的三个按钮效果是通过css改变input标签来实现的，下面两个则是两个a标签，通过css来改变相应的样式，下面我们一起来学习一下上面的效果。　一、按钮设置。在界面上添加三个input按钮。；　css代码。input{ width： 100px；height： 40px；border： none；background-image： url(button/btn.png)；}。这样的效果存在的问题就是，的背景是固定的，不能随的内容增加而改变。　二、a标签的效果的显示。a标签。按钮。css代码。

　　上一篇为大家介绍了一下关于菜单效果的制作，本篇为大家再分享一下关于水晶按钮的实现，本篇我们将不会再涉及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{ background-position: 0 -80px;} a span{ display: inline-table; height: 40px; padding-right: 15px; color: #fff; background: url(button/btn_bg.png) right -40px;} a:HOVER span{ background-position: right -120px;}

　三、css3新增的圆角设置属性实现上述效果：

　　a标签：

按钮

　　css新增圆角属性：

　　　　　.button{ display: inline-table; height: 40px; color: #fff; padding: 0 15px; background: url(button/css3_btn_bg.png); text-align: center; border: 1px solid #3c8134; border-radius: 5px} .button:HOVER { background-position: 0 -40px;}

　四、最后我们通过一个菜单效果的案例结束本篇的总结：

　　效果图：

　　界面代码：

 首页
 最新产品
 内部新闻
 联系我们

　　css代码：

　　好了到这里我们关于水晶按钮的实现，就为大家分享完毕了，代码这里面关于css代码都是最基本的，相信大家应该没有什么困难。如果你有什么好的想法，请留言交流。

水晶按钮_html/css

推荐度：

点击下载本文 文档为doc格式

标签：按钮 html css

热门焦点

水晶按钮_html/css

水晶按钮_html/css

水晶按钮_html/css

最新推荐

猜你喜欢

热门推荐