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

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?

Bagaimana cara menambah kesan strok kepada imej PNG di laman web?

Apakah tujuan & lt; meter & gt; unsur?

Apakah tujuan & lt; DATALIST & GT; unsur?

Apakah tujuan & lt; kemajuan & gt; unsur?

Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?
