基于CSS3的漂亮按钮
- WBOYオリジナル
- 2016-06-07 11:43:131140ブラウズ
使用CSS3来制作圆角阴影、渐变色的漂亮按钮，不需要任何图片和javascript脚本，只需要CSS3就可以轻松实现按钮效果，并且可以适用于任意HTML元素，如div，span，p，a，button，input等，适用于任意HTML元素，且大小随字号的改变而改变。
效果：
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元