Heim > php教程 > php手册 > 基于CSS3的漂亮按钮

基于CSS3的漂亮按钮

WBOY
Freigeben: 2016-06-07 11:43:13
Original
1163 Leute haben es durchsucht

使用CSS3来制作圆角阴影、渐变色的漂亮按钮,不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,如div,span,p,a,button,input等,适用于任意HTML元素,且大小随字号的改变而改变
效果:
基于CSS3的漂亮按钮
css:.button {<br>     display: inline-block;<br>     outline: none;<br>     cursor: pointer;<br>     text-align: center;<br>     text-decoration: none;<br>     font: 16px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif;<br>     padding: .5em 2em .55em;<br>     text-shadow: 0 1px 1px rgba(0,0,0,.3);<br>     -webkit-border-radius: .5em; <br>     -moz-border-radius: .5em;<br>     border-radius: .5em;<br>     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);<br>     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);<br>     box-shadow: 0 1px 2px rgba(0,0,0,.2);<br> }<br> .button:hover {<br>     text-decoration: none;<br> }<br> .button:active {<br>     position: relative;<br>     top: 1px;<br> }<br> .bigrounded {<br>     -webkit-border-radius: 2em;<br>     -moz-border-radius: 2em;<br>     border-radius: 2em;<br> }<br> .medium {<br>     font-size: 12px;<br>     padding: .4em 1.5em .42em;<br> }<br> .small {<br>     font-size: 11px;<br>     padding: .2em 1em .275em;<br> }<br> <br> <br> /* blue */<br> .blue {<br>     color: #d9eef7;<br>     border: solid 1px #0076a3;<br>     background: #0095cd;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));<br>     background: -moz-linear-gradient(top,  #00adee,  #0078a5);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');<br> }<br> .blue:hover {<br>     background: #007ead;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));<br>     background: -moz-linear-gradient(top,  #0095cc,  #00678e);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');<br> }<br> .blue:active {<br>     color: #80bed6;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));<br>     background: -moz-linear-gradient(top,  #0078a5,  #00adee);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');<br> }<br> <br> /* green */<br> .green {<br>     color: #e8f0de;<br>     border: solid 1px #538312;<br>     background: #64991e;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));<br>     background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');<br> }<br> .green:hover {<br>     background: #538018;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));<br>     background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');<br> }<br> .green:active {<br>     color: #a9c08c;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));<br>     background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');<br> }<br> <br> /* white */<br> .white {<br>     color: #606060;<br>     border: solid 1px #b7b7b7;<br>     background: #fff;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));<br>     background: -moz-linear-gradient(top,  #fff,  #ededed);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');<br> }<br> .white:hover {<br>     background: #ededed;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));<br>     background: -moz-linear-gradient(top,  #fff,  #dcdcdc);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');<br> }<br> .white:active {<br>     color: #999;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));<br>     background: -moz-linear-gradient(top,  #ededed,  #fff);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');<br> }<br> <br> /* orange */<br> .orange {<br>     color: #fef4e9;<br>     border: solid 1px #da7c0c;<br>     background: #f78d1d;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));<br>     background: -moz-linear-gradient(top,  #faa51a,  #f47a20);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');<br> }<br> .orange:hover {<br>     background: #f47c20;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));<br>     background: -moz-linear-gradient(top,  #f88e11,  #f06015);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');<br> }<br> .orange:active {<br>     color: #fcd3a5;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));<br>     background: -moz-linear-gradient(top,  #f47a20,  #faa51a);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');<br> }html:<div> <br>         <a>蓝色</a> <br>         <a>Rounded</a> <br>         <a>Medium</a> <br>         <a>Small</a> <br>         <br>         <input> <br>         <button>Button Tag</button><br>     </div> <br>     <br>     <div> <br>         <a>绿色</a> <br>         <a>Rounded</a> <br>         <a>Medium</a> <br>         <a>Small</a> <br>         <br>         <input> <br>         <button>Button Tag</button><br>     </div> <br>     <br>     <div> <br>         <a>灰白</a> <br>         <a>Rounded</a> <br>         <a>Medium</a> <br>         <a>Small</a> <br>         <input> <br>         <button>Button Tag</button><br>     </div> <br>     <br>     <div> <br>         <a>橘红</a> <br>         <a>Rounded</a> <br>         <a>Medium</a> <br>         <a>Small</a> <br>         <input> <br>         <button>Button Tag</button><br>     </div>----------------------------------------------------------+++++++++++++++--------------------------------------------------
这么好的东西,你必须:
称赞之
收藏之
扩展之

AD:真正免费,域名+虚机+企业邮箱=0元

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage