Heim >Web-Frontend >HTML-Tutorial >水晶按钮_html/css_WEB-ITnose
水晶按钮_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:491316Durchsuche
上一篇为大家介绍了一下关于菜单效果的制作，本篇为大家再分享一下关于水晶按钮的实现，本篇我们将不会再涉及javascript的知识，所有效果我们都将同css来实现，内容没有什么难度，学完本篇我相信大家对css的强大，一定会感到赞叹的，废话不多说，下面我们先来看一下效果：
上图中的最上面的三个按钮效果是通过css改变input标签来实现的，下面两个则是两个a标签，通过css来改变相应的样式，下面我们一起来学习一下上面的效果。
一、按钮设置：
在界面上添加三个input按钮：
<input type="submit" value="提交"/> <input type="button" value="上交"/> <input type="reset" value="重置">
css代码：
input{ width: 100px; height: 40px; border: none; background-image: url(button/btn.png);} 这样的效果存在的问题就是，我们的背景是固定的，不能随我们的内容增加而改变。
二、a标签的效果的显示：
a标签：
<a href="#"><span>按钮</span></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标签：
<a href="#" class="button" >按钮</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;} 四、最后我们通过一个菜单效果的案例结束本篇的总结：
效果图：
界面代码：
<body> <ul> <li><a href="#" class="ac"><span>首页</span></a></li> <li><a href="#"><span>最新产品</span></a></li> <li><a href="#"><span>内部新闻</span></a></li> <li><a href="#"><span>联系我们</span></a></li> </ul></body>
css代码：
<style type="text/css">body ul li {margin: 0px; padding: 0px; font-size: 12px; }ul { list-style-type: none; height: 27px; width:500px;border-bottom:2px solid #21530C}li { float: left; }a{display:inline-block;height:27px;line-height:27px;text-decoration:none;padding-left:9px;color:#000;margin-right:10px;}a span{display:inline-block;height:27px;padding-right:9px;}a:hover{ background:url(button/left.jpg) no-repeat ;}a:hover span{ background:url(button/right.jpg) no-repeat right #21530C;color:#fff;} </style> 好了到这里我们关于水晶按钮的实现，就为大家分享完毕了，代码这里面关于css代码都是最基本的，相信大家应该没有什么困难。如果你有什么好的想法，请留言交流。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：html学习Nächster Artikel：HTML5-表格_html/css_WEB-ITnose