CSS3立体按钮

来源：互联网发布：linux中安装jmeter 编辑：程序博客网时间：2024/04/28 22:41

基础样式:

.button{
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100%Arial,Helvetica,sans-serif;
padding: .5em 2em.55em;
text-shadow: 0 1px 1pxrgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2pxrgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2pxrgba(0,0,0,.2);
box-shadow: 0 1px 2pxrgba(0,0,0,.2);
}

橘红色：

.orange {
color: #fef4e9;
border: solid 1px#da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear,left top,left bottom,from(#faa51a),to(#f47a20));
background: -moz-linear-gradient(top,#faa51a,#f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',endColorstr='#f47a20');
}
.orange:hover{
background: #f47c20;
background: -webkit-gradient(linear,left top,left bottom,from(#f88e11),to(#f06015));
background: -moz-linear-gradient(top,#f88e11,#f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',endColorstr='#f06015');
}
.orange:active{
color: #fcd3a5;
background: -webkit-gradient(linear,left top,left bottom,from(#f47a20),to(#faa51a));
background: -moz-linear-gradient(top,#f47a20,#faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',endColorstr='#faa51a');
}

蓝色：

.blue {    color: #d9eef7;    border: solid 1px #0076a3;    background: #0095cd;    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));    background: -moz-linear-gradient(top,  #00adee,  #0078a5);    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');}.blue:hover {    background: #007ead;    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));    background: -moz-linear-gradient(top,  #0095cc,  #00678e);    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');}.blue:active {    color: #80bed6;    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));    background: -moz-linear-gradient(top,  #0078a5,  #00adee);    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');}

白色：

.white {    color: #606060;    border: solid 1px #b7b7b7;    background: #fff;    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));    background: -moz-linear-gradient(top,  #fff,  #ededed);    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');}.white:hover {    background: #ededed;    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));    background: -moz-linear-gradient(top,  #fff,  #dcdcdc);    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');}.white:active {    color: #999;    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));    background: -moz-linear-gradient(top,  #ededed,  #fff);    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');}

应用:

<a href="#" class="button orange">button</a>

0 0