這篇文章將為大家詳細(xì)講解有關(guān)css中如何實(shí)現(xiàn)不同的button樣式，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

為修武等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及修武網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站制作、做網(wǎng)站、修武網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

在網(wǎng)頁(yè)設(shè)計(jì)過程中，程序員們常常需要配合美工來(lái)設(shè)計(jì)頁(yè)面的美觀效果，當(dāng)然大部分頁(yè)面風(fēng)格都是美工的工作。但是按鈕button樣式，是我們程序員最常用的。

注：源碼里面使用了多種html標(biāo)簽做成按鈕，有a，input，span，div，p，h4?？傆羞m合你的標(biāo)簽

button樣式源碼如下：

body{

background:#ededed;

width:900px;

margin:30pxauto;

color:#999;

}

p{

margin:002em;

}

h2{

margin:0;

}

a{

color:#339;

text-decoration:none;

}

a:hover{

text-decoration:underline;

}

div{

padding:20px0;

border-bottom:solid1px#ccc;

}

/*button

----------------------------------------------*/

.button{

display:inline-block;

zoom:1;/*zoomand*display=ie7hackfordisplay:inline-block*/

*display:inline;

vertical-align:baseline;

margin:02px;

outline:none;

cursor:pointer;

text-align:center;

text-decoration:none;

font:14px/100%Arial,Helvetica,sans-serif;

padding:.5em2em.55em;

text-shadow:01px1pxrgba(0,0,0,.3);

-webkit-border-radius:.5em;

-moz-border-radius:.5em;

border-radius:.5em;

-webkit-box-shadow:01px2pxrgba(0,0,0,.2);

-moz-box-shadow:01px2pxrgba(0,0,0,.2);

box-shadow:01px2pxrgba(0,0,0,.2);

}

.button:hover{

text-decoration:none;

}

.button:active{

position:relative;

top:1px;

}

.bigrounded{

-webkit-border-radius:2em;

-moz-border-radius:2em;

border-radius:2em;

}

.medium{

font-size:12px;

padding:.4em1.5em.42em;

}

.small{

font-size:11px;

padding:.2em1em.275em;

}

/*colorstyles

----------------------------------------------*/

/*black*/

.black{

color:#d7d7d7;

border:solid1px#333;

background:#333;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#666),to(#000));

background:-moz-linear-gradient(top,#666,#000);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',endColorstr='#000000');

}

.black:hover{

background:#000;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#444),to(#000));

background:-moz-linear-gradient(top,#444,#000);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#000000');

}

.black:active{

color:#666;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#000),to(#444));

background:-moz-linear-gradient(top,#000,#444);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#666666');

}

/*gray*/

.gray{

color:#e9e9e9;

border:solid1px#555;

background:#6e6e6e;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#888),to(#575757));

background:-moz-linear-gradient(top,#888,#575757);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',endColorstr='#575757');

}

.gray:hover{

background:#616161;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#757575),to(#4b4b4b));

background:-moz-linear-gradient(top,#757575,#4b4b4b);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',endColorstr='#4b4b4b');

}

.gray:active{

color:#afafaf;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#575757),to(#888));

background:-moz-linear-gradient(top,#575757,#888);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',endColorstr='#888888');

}

/*white*/

.white{

color:#606060;

border:solid1px#b7b7b7;

background:#fff;

background:-webkit-gradient(linear,lefttop,leftbottom,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,lefttop,leftbottom,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,lefttop,leftbottom,from(#ededed),to(#fff));

background:-moz-linear-gradient(top,#ededed,#fff);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#ffffff');

}

/*orange*/

.orange{

color:#fef4e9;

border:solid1px#da7c0c;

background:#f78d1d;

background:-webkit-gradient(linear,lefttop,leftbottom,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,lefttop,leftbottom,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,lefttop,leftbottom,from(#f47a20),to(#faa51a));

background:-moz-linear-gradient(top,#f47a20,#faa51a);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',endColorstr='#faa51a');

}

/*red*/

.red{

color:#faddde;

border:solid1px#980c10;

background:#d81b21;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#ed1c24),to(#aa1317));

background:-moz-linear-gradient(top,#ed1c24,#aa1317);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',endColorstr='#aa1317');

}

.red:hover{

background:#b61318;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#c9151b),to(#a11115));

background:-moz-linear-gradient(top,#c9151b,#a11115);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',endColorstr='#a11115');

}

.red:active{

color:#de898c;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#aa1317),to(#ed1c24));

background:-moz-linear-gradient(top,#aa1317,#ed1c24);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',endColorstr='#ed1c24');

}

/*blue*/

.blue{

color:#d9eef7;

border:solid1px#0076a3;

background:#0095cd;

background:-webkit-gradient(linear,lefttop,leftbottom,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,lefttop,leftbottom,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,lefttop,leftbottom,from(#0078a5),to(#00adee));

background:-moz-linear-gradient(top,#0078a5,#00adee);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',endColorstr='#00adee');

}

/*rosy*/

.rosy{

color:#fae7e9;

border:solid1px#b73948;

background:#da5867;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#f16c7c),to(#bf404f));

background:-moz-linear-gradient(top,#f16c7c,#bf404f);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',endColorstr='#bf404f');

}

.rosy:hover{

background:#ba4b58;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#cf5d6a),to(#a53845));

background:-moz-linear-gradient(top,#cf5d6a,#a53845);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a',endColorstr='#a53845');

}

.rosy:active{

color:#dca4ab;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#bf404f),to(#f16c7c));

background:-moz-linear-gradient(top,#bf404f,#f16c7c);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f',endColorstr='#f16c7c');

}

/*green*/

.green{

color:#e8f0de;

border:solid1px#538312;

background:#64991e;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#7db72f),to(#4e7d0e));

background:-moz-linear-gradient(top,#7db72f,#4e7d0e);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f',endColorstr='#4e7d0e');

}

.green:hover{

background:#538018;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#6b9d28),to(#436b0c));

background:-moz-linear-gradient(top,#6b9d28,#436b0c);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28',endColorstr='#436b0c');

}

.green:active{

color:#a9c08c;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#4e7d0e),to(#7db72f));

background:-moz-linear-gradient(top,#4e7d0e,#7db72f);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e',endColorstr='#7db72f');

}

/*pink*/

.pink{

color:#feeef5;

border:solid1px#d2729e;

background:#f895c2;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#feb1d3),to(#f171ab));

background:-moz-linear-gradient(top,#feb1d3,#f171ab);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',endColorstr='#f171ab');

}

.pink:hover{

background:#d57ea5;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#f4aacb),to(#e86ca4));

background:-moz-linear-gradient(top,#f4aacb,#e86ca4);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb',endColorstr='#e86ca4');

}

.pink:active{

color:#f3c3d9;

background:-webkit-gradient(linear,lefttop,leftbottom,from(#f171ab),to(#feb1d3));

background:-moz-linear-gradient(top,#f171ab,#feb1d3);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab',endColorstr='#feb1d3');

}

CSS3GradientButtons

byWebDesignerWall

PTag

H3