首页 >web前端 >html教程 >水晶按钮_html/css_WEB-ITnose

水晶按钮_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:46:491323浏览

  上一篇为大家介绍了一下关于菜单效果的制作,本篇为大家再分享一下关于水晶按钮的实现,本篇我们将不会再涉及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代码都是最基本的,相信大家应该没有什么困难。如果你有什么好的想法,请留言交流。

 

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn