zoukankan      html  css  js  c++  java
  • 36种漂亮的网页Button按钮样式

    本页面向大家展开了36种漂亮的网页Button按钮样式,各式各样的都有,适合不同的场合使用。CSS3技术的确非常强大,不过大家测试的时候不要使用IE8,因为IE8还没有完全支持css3,微软如此不屑CSS3,唉!请使用火狐或Safari或Google Chrome。

      1 <!DOCTYPE HTML>
      2 <html lang="en-US">
      3 <head>
      4 <meta charset="UTF-8">
      5 <title>36种漂亮的CSS3网页按钮Button样式</title>
      6 <style type="text/css">
      7 body{ 
      8 background: #f5faff;
      9 }
     10 .demo_con{
     11 width: 960px;
     12 margin:40px auto 0;
     13 }
     14 .button{
     15 width: 140px;
     16 line-height: 38px;
     17 text-align: center;
     18 font-weight: bold;
     19 color: #fff;
     20 text-shadow:1px 1px 1px #333;
     21 border-radius: 5px;
     22 margin:0 20px 20px 0;
     23 position: relative;
     24 overflow: hidden;
     25 }
     26 .button:nth-child(6n){
     27 margin-right: 0;
     28 }
     29 .button.gray{
     30 color: #8c96a0;
     31 text-shadow:1px 1px 1px #fff;
     32 border:1px solid #dce1e6;
     33 box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
     34 background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
     35 background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
     36 background: linear-gradient(top,#f2f3f7,#e4e8ec);
     37 }
     38 .button.black{
     39 border:1px solid #333;
     40 box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;
     41 background: -webkit-linear-gradient(top,#656565,#4c4c4c);
     42 background: -moz-linear-gradient(top,#656565,#4a4a4a);
     43 background: linear-gradient(top,#656565,#4a4a4a);
     44 }
     45 .button.red{
     46 border:1px solid #b42323;
     47 box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
     48 background: -webkit-linear-gradient(top,#d53939,#b92929);
     49 background: -moz-linear-gradient(top,#d53939,#b92929);
     50 background: linear-gradient(top,#d53939,#b92929);
     51 }
     52 .button.yellow{
     53 border:1px solid #d2a000;
     54 box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
     55 background: -webkit-linear-gradient(top,#fece34,#d8a605);
     56 background: -moz-linear-gradient(top,#fece34,#d8a605);
     57 background: linear-gradient(top,#fece34,#d8a605);
     58 }
     59 .button.green{
     60 border:1px solid #64c878;
     61 box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
     62 background: -webkit-linear-gradient(top,#90dfa2,#84d494);
     63 background: -moz-linear-gradient(top,#90dfa2,#84d494);
     64 background: linear-gradient(top,#90dfa2,#84d494);
     65 }
     66 .button.blue{
     67 border:1px solid #1e7db9;
     68 box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset;
     69 background: -webkit-linear-gradient(top,#42a4e0,#2e88c0);
     70 background: -moz-linear-gradient(top,#42a4e0,#2e88c0);
     71 background: linear-gradient(top,#42a4e0,#2e88c0);
     72 }
     73 .round,
     74     .side,
     75     .tags{
     76 padding-right: 30px;
     77 }
     78 .round:after{
     79 position: absolute;
     80 display: inline-block;
     81 content: "03c";
     82 top:50%;
     83 right:10px;
     84 margin-top: -10px;
     85 width: 17px;
     86 height: 20px;
     87 padding-left: 3px;
     88 line-height:18px;
     89 font-size: 10px;
     90 font-weight: normal;
     91 border-radius: 10px;
     92 text-shadow:-2px 0 1px #333;
     93 -webkit-transform:rotate(-90deg);
     94 -moz-transform:rotate(-90deg); 
     95 transform:rotate(-90deg);
     96 }
     97 .gray.round:after{
     98 box-shadow:1px 0 1px rgba(255,255,255,1) inset,1px 0 1px rgba(0,0,0,.2);
     99 background:-webkit-linear-gradient(top,#dce1e6,#dde2e7);
    100 background:-moz-linear-gradient(top,#dce1e6,#dde2e7);
    101 background:linear-gradient(top,#dce1e6,#dde2e7);
    102 text-shadow:-2px 0 1px #fff;
    103 }
    104 .black.round:after{
    105 box-shadow:1px 0 1px rgba(255,255,255,.5) inset,1px 0 1px rgba(0,0,0,.9);
    106 background:-webkit-linear-gradient(top,#333,#454545);
    107 background:-moz-linear-gradient(top,#333,#454545);
    108 background:linear-gradient(top,#333,#454545);
    109 }
    110 .red.round:after{
    111 box-shadow:1px 0 1px rgba(255,255,255,.6) inset,1px 0 1px rgba(130,25,25,.9);
    112 background:-webkit-linear-gradient(top,#b12222,#b42323);
    113 background:-moz-linear-gradient(top,#b12222,#b42323);
    114 background:linear-gradient(top,#b12222,#b42323);
    115 }
    116 .yellow.round:after{
    117 box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(148,131,4,.9);
    118 background:-webkit-linear-gradient(top,#cf9d00,#d2a000);
    119 background:-moz-linear-gradient(top,#cf9d00,#d2a000);
    120 background:linear-gradient(top,#cf9d00,#d2a000);                         
    121 }
    122 .green.round:after{
    123 box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(51,126,66,.9);
    124 background:-webkit-linear-gradient(top,#64c878,#6dcb80);
    125 background:-moz-linear-gradient(top,#64c878,#6dcb80);
    126 background:linear-gradient(top,#64c878,#6dcb80);                         
    127 }
    128 .blue.round:after{
    129 box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(18,85,128,.9);
    130 background:-webkit-linear-gradient(top,#1e7db9,#2b85bd);
    131 background:-moz-linear-gradient(top,#1e7db9,#2b85bd);
    132 background:linear-gradient(top,#1e7db9,#2b85bd);                         
    133 }
    134 .side:after{
    135 position: absolute;
    136 display: inline-block;
    137 content: "0bb";
    138 top:3px;
    139 right:-4px;
    140 width: 38px;
    141 height:30px;
    142 font-weight: normal;
    143 line-height: 26px;
    144 border-radius:0 0 5px 5px;
    145 text-shadow:-2px 0 1px #333;
    146 -webkit-transform:rotate(-90deg);
    147 -moz-transform:rotate(-90deg);
    148 transform:rotate(-90deg);
    149 }
    150 .gray.side:after{
    151 text-shadow:-2px 0 1px #fff;
    152 border-top: 1px solid #d4d4d4;
    153 box-shadow:-2px 0 1px #eceef1 inset;
    154 background:-webkit-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
    155 background:-moz-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
    156 background:linear-gradient(right,#e1e6ea,#f2f2f6 60%); 
    157 }
    158 .black.side:after{
    159 border-top: 1px solid #222;
    160 box-shadow:-2px 0 1px #606060 inset;
    161 background:-webkit-linear-gradient(right,#373737,#555 60%);
    162 background:-moz-linear-gradient(right,#373737,#555 60%);
    163 background:linear-gradient(right,#373737,#555 60%); 
    164 }
    165 .red.side:after{
    166 border-top: 1px solid #aa1e1e;
    167 box-shadow:-2px 0 1px #c75959 inset;
    168 background:-webkit-linear-gradient(right,#b82929,#d73f3f 60%);
    169 background:-moz-linear-gradient(top,#b82929,#d73f3f 60%);
    170 background:linear-gradient(top,#b82929,#d73f3f 60%); 
    171 }
    172 .yellow.side:after{
    173 border-top: 1px solid #ba8f06;
    174 box-shadow:-2px 0 1px #deb842 inset;
    175 background:-webkit-linear-gradient(right,#d5a406,#fdc40b 60%);
    176 background:-moz-linear-gradient(right,#d5a406,#fdc40b 60%);
    177 background:linear-gradient(right,#d5a406,#fdc40b 60%); 
    178 }
    179 .green.side:after{
    180 border-top: 1px solid #53b567;
    181 box-shadow:-2px 0 1px #8ad599 inset;
    182 background:-webkit-linear-gradient(right,#69ca7c,#91e5a5 60%);
    183 background:-moz-linear-gradient(right,#69ca7c,#91e5a5 60%);
    184 background:linear-gradient(right,#69ca7c,#91e5a5 60%); 
    185 }
    186 .blue.side:after{
    187 border-top: 1px solid #1971a8;
    188 box-shadow:-2px 0 1px #559dca inset;
    189 background:-webkit-linear-gradient(right,#2482bd,#3fa2e0 60%);
    190 background:-moz-linear-gradient(right,#2482bd,#3fa2e0 60%);
    191 background:linear-gradient(right,#2482bd,#3fa2e0 60%); 
    192 }
    193 .tags:after{
    194 font-weight: normal;
    195 position: absolute;
    196 display: inline-block;
    197 content: "FREE";
    198 top:-3px;
    199 right: -33px;
    200 color: #fff;
    201 text-shadow:none;
    202 width: 85px;
    203 height:25px;
    204 line-height: 28px;
    205 -webkit-transform:rotate(45deg) scale(.7,.7);
    206 -moz-transform:rotate(45deg) scale(.7,.7);
    207 transform:rotate(45deg) scale(.7,.7);
    208 }
    209 .gray.tags:after{
    210 background: #8c96a0;
    211 border:2px solid #fff;    
    212 }
    213 .black.tags:after{
    214 background: #333;
    215 border:2px solid #777;    
    216 }
    217 .red.tags:after{
    218 background: #b42323;
    219 border:2px solid #df4141;    
    220 }
    221 .yellow.tags:after{
    222 background: #d2a000;
    223 border:2px solid #fcc100;    
    224 }
    225 .green.tags:after{
    226 background: #64c878;
    227 border:2px solid #9bebac;    
    228 }
    229 .blue.tags:after{
    230 background: #1e7db9;
    231 border:2px solid #54b1e9;    
    232 }
    233 .button.rarrow,
    234     .button.larrow{
    235 overflow:visible;
    236 }
    237 .rarrow:after,    
    238     .rarrow:before,
    239     .larrow:after,    
    240     .larrow:before{
    241 position:absolute;
    242 content: "";
    243 display: block;
    244 width: 28px;
    245 height: 28px;
    246 -webkit-transform:rotate(45deg);
    247 -moz-transform:rotate(45deg);
    248 transform:rotate(45deg);
    249 }
    250 .rarrow:before{
    251 width: 27px;
    252 height: 27px;
    253 top: 6px;
    254 right: -13px;
    255 clip: rect(auto auto 26px 2px);
    256 }
    257 .rarrow:after{
    258 top: 6px;
    259 right: -12px;
    260 clip: rect(auto auto 26px 2px);
    261 }
    262 .gray.rarrow:before{
    263 background: #d6dbe0;
    264 }
    265 .gray.rarrow:after{
    266 box-shadow: 0 1px 0 #fff inset,-1px 0 0 #b7babd inset;
    267 background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
    268 background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
    269 background:linear-gradient(top left,#f2f3f7,#e4e8ec);
    270 }
    271 .black.rarrow:before{
    272 background: #333;
    273 }
    274 .black.rarrow:after{
    275 box-shadow: 0 1px 0 #8B8B8B inset,-1px 0 0 #3d3d3d inset,-2px 0 0 #8B8B8B inset;
    276 background:-webkit-linear-gradient(top left,#656565,#4C4C4C);
    277 background:-moz-linear-gradient(top left,#656565,#4C4C4C);
    278 background:linear-gradient(top left,#656565,#4C4C4C);
    279 }
    280 .red.rarrow:before{
    281 background: #B42323;
    282 }
    283 .red.rarrow:after{
    284 box-shadow: 0 1px 0 #E99494 inset,-1px 0 0 #954B4B inset,-2px 0 0 #E99494 inset;
    285 background:-webkit-linear-gradient(top left,#D53939,#B92929);
    286 background:-moz-linear-gradient(top left,#D53939,#B92929);
    287 background:linear-gradient(top left,#D53939,#B92929);
    288 }
    289 .yellow.rarrow:before{
    290 background: #D2A000;
    291 }
    292 .yellow.rarrow:after{
    293 box-shadow: 0 1px 0 #FEDD71 inset,-1px 0 0 #A38B39 inset,-2px 0 0 #FEDD71 inset;
    294 background:-webkit-linear-gradient(top left,#FECE34,#D8A605);
    295 background:-moz-linear-gradient(top left,#FECE34,#D8A605);
    296 background:linear-gradient(top left,#FECE34,#D8A605);
    297 }
    298 .green.rarrow:before{
    299 background: #64C878;
    300 }
    301 .green.rarrow:after{
    302 box-shadow: 0 1px 0 #B9ECC4 inset,-1px 0 0 #6C9F76 inset,-2px 0 0 #B9ECC4 inset;
    303 background:-webkit-linear-gradient(top left,#90DFA2,#84D494);
    304 background:-moz-linear-gradient(top left,#90DFA2,#84D494);
    305 background:linear-gradient(top left,#90DFA2,#84D494);
    306 }
    307 .blue.rarrow:before{
    308 background: #1E7DB9;
    309 }
    310 .blue.rarrow:after{
    311 box-shadow: 0 1px 0 #8FCAEE inset,-1px 0 0 #497897 inset,-2px 0 0 #8FCAEE inset;
    312 background:-webkit-linear-gradient(top left,#42A4E0,#2E88C0);
    313 background:-moz-linear-gradient(top left,#42A4E0,#2E88C0);
    314 background:linear-gradient(top left,#42A4E0,#2E88C0);
    315 }
    316 .larrow:before{
    317 top: 6px;
    318 left: -13px;
    319 width: 27px;
    320 height: 27px;
    321 clip: rect(2px 26px auto auto);
    322 }
    323 .larrow:after{
    324 top: 6px;
    325 left: -12px;
    326 clip: rect(2px 26px auto auto);
    327 }
    328 .gray.larrow:before{
    329 background: #d6dbe0;
    330 }
    331 .gray.larrow:after{
    332 box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #fff inset;
    333 background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
    334 background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
    335 background:linear-gradient(top left,#f2f3f7,#e4e8ec);
    336 }
    337 .black.larrow:before{
    338 background: #333;
    339 }
    340 .black.larrow:after{
    341 box-shadow: 0 -1px 0 #3d3d3d inset,0 -2px 0 #8B8B8B inset,1px 0 0 #8B8B8B inset;
    342 background:-webkit-linear-gradient(top left,#656565,#4C4C4C);
    343 background:-moz-linear-gradient(top left,#656565,#4C4C4C);
    344 background:linear-gradient(top left,#656565,#4C4C4C);
    345 }
    346 .red.larrow:before{
    347 background: #B42323;
    348 }
    349 .red.larrow:after{
    350 box-shadow: 0 -1px 0 #954B4B inset,0 -2px 0 #E99494 inset,1px 0 0 #E99494 inset;
    351 background:-webkit-linear-gradient(top left,#D53939,#B92929);
    352 background:-moz-linear-gradient(top left,#D53939,#B92929);
    353 background:linear-gradient(top left,#D53939,#B92929);
    354 }
    355 .yellow.larrow:before{
    356 background: #D2A000;
    357 }
    358 .yellow.larrow:after{
    359 box-shadow: 0 -1px 0 #A38B39 inset,0 -2px 0 #FEDD71 inset,1px 0 0 #FEDD71 inset;
    360 background:-webkit-linear-gradient(top left,#FECE34,#D8A605);
    361 background:-moz-linear-gradient(top left,#FECE34,#D8A605);
    362 background:linear-gradient(top left,#FECE34,#D8A605);
    363 }
    364 .green.larrow:before{
    365 background: #64C878;
    366 }
    367 .green.larrow:after{
    368 box-shadow: 0 -1px 0 #6C9F76 inset,0 -2px 0 #B9ECC4 inset,1px 0 0 #B9ECC4 inset;
    369 background:-webkit-linear-gradient(top left,#90DFA2,#84D494);
    370 background:-moz-linear-gradient(top left,#90DFA2,#84D494);
    371 background:linear-gradient(top left,#90DFA2,#84D494);
    372 }
    373 .blue.larrow:before{
    374 background: #1E7DB9;
    375 }
    376 .blue.larrow:after{
    377 box-shadow: 0 -1px 0 #497897 inset,0 -2px 0 #8FCAEE inset,1px 0 0 #8FCAEE inset;
    378 background:-webkit-linear-gradient(top left,#42A4E0,#2E88C0);
    379 background:-moz-linear-gradient(top left,#42A4E0,#2E88C0);
    380 background:linear-gradient(top left,#42A4E0,#2E88C0);
    381 }
    382 .gray:hover{
    383 background: -webkit-linear-gradient(top,#fefefe,#ebeced);
    384 background: -moz-linear-gradient(top,#f2f3f7,#ebeced);
    385 background: linear-gradient(top,#f2f3f7,#ebeced);
    386 }
    387 .black:hover{
    388 background: -webkit-linear-gradient(top,#818181,#575757);
    389 background: -moz-linear-gradient(top,#818181,#575757);
    390 background: linear-gradient(top,#818181,#575757);
    391 }
    392 .red:hover{
    393 background: -webkit-linear-gradient(top,#eb6f6f,#c83c3c);
    394 background: -moz-linear-gradient(top,#eb6f6f,#c83c3c);
    395 background: linear-gradient(top,#eb6f6f,#c83c3c);
    396 }
    397 .yellow:hover{
    398 background: -webkit-linear-gradient(top,#ffd859,#e3bb38);
    399 background: -moz-linear-gradient(top,#ffd859,#e3bb38);
    400 background: linear-gradient(top,#ffd859,#e3bb38);
    401 }
    402 .green:hover{
    403 background: -webkit-linear-gradient(top,#aaebb9,#82d392);
    404 background: -moz-linear-gradient(top,#aaebb9,#82d392);
    405 background: linear-gradient(top,#aaebb9,#82d392);
    406 }
    407 .blue:hover{
    408 background: -webkit-linear-gradient(top,#70bfef,#4097ce);
    409 background: -moz-linear-gradient(top,#70bfef,#4097ce);
    410 background: linear-gradient(top,#70bfef,#4097ce);
    411 }
    412 .gray:active{
    413 top:1px;
    414 box-shadow: 0 1px 3px #a8abae inset,0 3px 0 #fff;
    415 background: -webkit-linear-gradient(top,#e4e8ec,#e4e8ec);
    416 background: -moz-linear-gradient(top,#e4e8ec,#e4e8ec);
    417 background: linear-gradient(top,#e4e8ec,#e4e8ec);
    418 }
    419 .black:active{
    420 top:1px;
    421 box-shadow: 0 1px 3px #111 inset,0 3px 0 #fff;
    422 background: -webkit-linear-gradient(top,#424242,#575757);
    423 background: -moz-linear-gradient(top,#424242,#575757);
    424 background: linear-gradient(top,#424242,#575757);
    425 }
    426 .red:active{
    427 top:1px;
    428 box-shadow: 0 1px 3px #5b0505 inset,0 3px 0 #fff;
    429 background: -webkit-linear-gradient(top,#b11a1a,#bf2626);
    430 background: -moz-linear-gradient(top,#b11a1a,#bf2626);
    431 background: linear-gradient(top,#b11a1a,#bf2626);
    432 }
    433 .yellow:active{
    434 top:1px;
    435 box-shadow: 0 1px 3px #816b1f inset,0 3px 0 #fff;
    436 background: -webkit-linear-gradient(top,#d3a203,#dba907);
    437 background: -moz-linear-gradient(top,#d3a203,#dba907);
    438 background: linear-gradient(top,#d3a203,#dba907);
    439 }
    440 .green:active{
    441 top:1px;
    442 box-shadow: 0 1px 3px #4d7254 inset,0 3px 0 #fff;
    443 background: -webkit-linear-gradient(top,#5eac6e,#72b37e);
    444 background: -moz-linear-gradient(top,#5eac6e,#72b37e);
    445 background: linear-gradient(top,#5eac6e,#72b37e);
    446 }
    447 .blue:active{
    448 top:1px;
    449 box-shadow: 0 1px 3px #114566 inset,0 3px 0 #fff;
    450 background: -webkit-linear-gradient(top,#1a71a8,#1976b1);
    451 background: -moz-linear-gradient(top,#1a71a8,#1976b1);
    452 background: linear-gradient(top,#1a71a8,#1976b1);
    453 }
    454 .gray.side:hover:after{
    455 background:-webkit-linear-gradient(right,#e7ebee,#f8f8f8 60%);
    456 background:-moz-linear-gradient(right,#e7ebee,#f8f8f8 60%);
    457 background:linear-gradient(right,#e7ebee,#f8f8f8 60%);
    458 }
    459 .black.side:hover:after{
    460 background:-webkit-linear-gradient(right,#555,#6f6f6f 60%);
    461 background:-moz-linear-gradient(right,#555,#6f6f6f 60%);
    462 background:linear-gradient(right,#555,#6f6f6f 60%); 
    463 }
    464 .red.side:hover:after{
    465 background:-webkit-linear-gradient(right,#c43333,#dc4949 60%);
    466 background:-moz-linear-gradient(right,#c43333,#dc4949 60%);
    467 background:linear-gradient(right,#c43333,#dc4949 60%); 
    468 }
    469 .yellow.side:hover:after{
    470 background:-webkit-linear-gradient(right,#e1b21a,#fbc71d 60%);
    471 background:-moz-linear-gradient(right,#e1b21a,#fbc71d 60%);
    472 background:linear-gradient(right,#e1b21a,#fbc71d 60%); 
    473 }
    474 .green.side:hover:after{
    475 background:-webkit-linear-gradient(right,#85da95,#94e0a5 60%);
    476 background:-moz-linear-gradient(right,#85da95,#94e0a5 60%);
    477 background:linear-gradient(right,#85da95,#94e0a5 60%); 
    478 }
    479 .blue.side:hover:after{
    480 background:-webkit-linear-gradient(right,#338fc8,#56b2eb 60%);
    481 background:-moz-linear-gradient(right,#338fc8,#56b2eb 60%);
    482 background:linear-gradient(right,#338fc8,#56b2eb 60%); 
    483 }
    484 .gray.side:active:after{
    485 top:4px;
    486 border-top: 1px solid #9fa6ab;
    487 box-shadow:-1px 0 1px #a8abae inset;
    488 background:-webkit-linear-gradient(right,#e4e8ec,#e4e8ec 60%);
    489 background:-moz-linear-gradient(right,#e4e8ec,#e4e8ec 60%);
    490 background:linear-gradient(right,#e4e8ec,#e4e8ec 60%); 
    491 }
    492 .black.side:active:after{
    493 box-shadow:-1px 0 1px #111 inset;
    494 background:-webkit-linear-gradient(right,#414040,#4d4c4c 60%);
    495 background:-moz-linear-gradient(right,#414040,#4d4c4c 60%);
    496 background:linear-gradient(right,#414040,#4d4c4c 60%); 
    497 }
    498 .red.side:active:after{
    499 box-shadow:-1px 0 1px #4b0707 inset;
    500 background:-webkit-linear-gradient(right,#b11a1a,#b11a1a 60%);
    501 background:-moz-linear-gradient(right,#b11a1a,#b11a1a 60%);
    502 background:linear-gradient(right,#b11a1a,#b11a1a 60%); 
    503 }
    504 .yellow.side:active:after{
    505 box-shadow:-1px 0 1px #816b1f inset;
    506 background:-webkit-linear-gradient(right,#d3a203,#dba907 60%);
    507 background:-moz-linear-gradient(right,#d3a203,#dba907 60%);
    508 background:linear-gradient(right,#d3a203,#dba907 60%); 
    509 }
    510 .green.side:active:after{
    511 box-shadow:-1px 0 1px #33663d inset;
    512 background:-webkit-linear-gradient(right,#63a870,#72b37e 60%);
    513 background:-moz-linear-gradient(right,#63a870,#72b37e 60%);
    514 background:linear-gradient(right,#63a870,#72b37e 60%); 
    515 }
    516 .blue.side:active:after{
    517 box-shadow:-1px 0 1px #114566 inset;
    518 background:-webkit-linear-gradient(right,#1a71a8,#1976b1 60%);
    519 background:-moz-linear-gradient(right,#1a71a8,#1976b1 60%);
    520 background:linear-gradient(right,#1a71a8,#1976b1 60%); 
    521 }
    522 .gray.rarrow:hover:after,
    523     .gray.rarrow:hover:after{
    524 background:-webkit-linear-gradient(top left,#fefefe,#ebeced);
    525 background:-moz-linear-gradient(top left,#fefefe,#ebeced);
    526 background:linear-gradient(top left,#fefefe,#ebeced);
    527 }
    528 .black.rarrow:hover:after,
    529     .black.larrow:hover:after{
    530 background:-webkit-linear-gradient(top left,#818181,#575757);
    531 background:-moz-linear-gradient(top left,#818181,#575757);
    532 background:linear-gradient(top left,#818181,#575757);
    533 }
    534 .red.rarrow:hover:after,
    535     .red.larrow:hover:after{
    536 background:-webkit-linear-gradient(top left,#eb6f6f,#c83c3c);
    537 background:-moz-linear-gradient(top left,#eb6f6f,#c83c3c);
    538 background:linear-gradient(top left,#eb6f6f,#c83c3c);
    539 }
    540 .yellow.rarrow:hover:after,
    541     .yellow.larrow:hover:after{
    542 background:-webkit-linear-gradient(top left,#ffd859,#e3bb38);
    543 background:-moz-linear-gradient(top left,#ffd859,#e3bb38);
    544 background:linear-gradient(top left,#ffd859,#e3bb38);
    545 }
    546 .green.rarrow:hover:after,
    547     .green.larrow:hover:after{
    548 background:-webkit-linear-gradient(top left,#aaebb9,#82d392);
    549 background:-moz-linear-gradient(top left,#aaebb9,#82d392);
    550 background:linear-gradient(top left,#aaebb9,#82d392);
    551 }
    552 .blue.rarrow:hover:after,
    553     .blue.larrow:hover:after{
    554 background:-webkit-linear-gradient(top left,#70bfef,#4097ce);
    555 background:-moz-linear-gradient(top left,#70bfef,#4097ce);
    556 background:linear-gradient(top left,#70bfef,#4097ce);
    557 }
    558 .gray.rarrow:active:after,
    559     .gray.larrow:active:after{
    560 background:-webkit-linear-gradient(top left,#e4e8ec,#e4e8ec);
    561 background:-moz-linear-gradient(top left,#e4e8ec,#e4e8ec);
    562 background:linear-gradient(top left,#e4e8ec,#e4e8ec);
    563 }
    564 .black.rarrow:active:after,
    565     .black.larrow:active:after{
    566 background:-webkit-linear-gradient(top left,#424242,#575757);
    567 background:-moz-linear-gradient(top left,#424242,#575757);
    568 background:linear-gradient(top left,#424242,#575757);
    569 }
    570 .red.rarrow:active:after,
    571     .red.larrow:active:after{
    572 background:-webkit-linear-gradient(top left,#b11a1a,#bf2626);
    573 background:-moz-linear-gradient(top left,#b11a1a,#bf2626);
    574 background:linear-gradient(top left,#b11a1a,#bf2626);
    575 }
    576 .yellow.rarrow:active:after,
    577     .yellow.larrow:active:after{
    578 background:-webkit-linear-gradient(top left,#d3a203,#dba907);
    579 background:-moz-linear-gradient(top left,#d3a203,#dba907);
    580 background:linear-gradient(top left,#d3a203,#dba907);
    581 }
    582 .green.rarrow:active:after,
    583     .green.larrow:active:after{
    584 background:-webkit-linear-gradient(top left,#63a870,#72b37e);
    585 background:-moz-linear-gradient(top left,#63a870,#72b37e);
    586 background:linear-gradient(top left,#63a870,#72b37e);
    587 }
    588 .blue.rarrow:active:after,
    589     .blue.larrow:active:after{
    590 background:-webkit-linear-gradient(top left,#1a71a8,#1976b1);
    591 background:-moz-linear-gradient(top left,#1a71a8,#1976b1);
    592 background:linear-gradient(top left,#1a71a8,#1976b1);
    593 }
    594 .gray.rarrow:active:after{
    595 box-shadow: 0 1px 0 #b7babd inset,-1px 0 0 #b7babd inset;
    596 }
    597 .gray.larrow:active:after{
    598 box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #b7babd inset;
    599 }
    600 .black.rarrow:active:after{
    601 box-shadow: 0 1px 0 #333 inset,-1px 0 0 #333 inset;
    602 }
    603 .black.larrow:active:after{
    604 box-shadow: 0 -1px 0 #333 inset,1px 0 0 #333 inset;
    605 }
    606 .red.rarrow:active:after{
    607 box-shadow: 0 1px 0 #640909 inset,-1px 0 0 #640909 inset;
    608 }
    609 .red.larrow:active:after{
    610 box-shadow: 0 -1px 0 #640909 inset,1px 0 0 #640909 inset;
    611 }
    612 .yellow.rarrow:active:after{
    613 box-shadow: 0 1px 0 #816b1f inset,-1px 0 0 #816b1f inset;
    614 }
    615 .yellow.larrow:active:after{
    616 box-shadow: 0 -1px 0 #816b1f inset,1px 0 0 #816b1f inset;
    617 }
    618 .green.rarrow:active:after{
    619 box-shadow: 0 1px 0 #4d7254 inset,-1px 0 0 #4d7254 inset;
    620 }
    621 .green.larrow:active:after{
    622 box-shadow: 0 -1px 0 #4d7254 inset,1px 0 0 #4d7254 inset;
    623 }
    624 .blue.rarrow:active:after{
    625 box-shadow: 0 1px 0 #114566 inset,-1px 0 0 #114566 inset;
    626 }
    627 .blue.larrow:active:after{
    628 box-shadow: 0 -1px 0 #114566 inset,1px 0 0 #114566 inset;
    629 }
    630     </style>
    631 </head>
    632 <body>
    633 <div class="page">
    634     <header id="header">
    635         <hgrounp class="white blank">
    636             <h1>36 Web Buttons Collection</h1>
    637             <h2>作者:藤藤(如有更好建议或疑问请加群:1041263)<h2>
    638         </hgrounp>
    639     </header>
    640     <section class="demo">
    641 <div class="demo_con">
    642  
    643     <button type="button" class="button gray">BUY NOW</button>
    644     <button type="button" class="button black">BUY NOW</button>
    645     <button type="button" class="button red">BUY NOW</button>
    646     <button type="button" class="button yellow">BUY NOW</button>
    647     <button type="button" class="button green">BUY NOW</button>
    648     <button type="button" class="button blue">BUY NOW</button>
    649  
    650     <button type="button" class="button gray round">DOWNLOAD</button>
    651     <button type="button" class="button black round">DOWNLOAD</button>
    652     <button type="button" class="button red round">DOWNLOAD</button>
    653     <button type="button" class="button yellow round">DOWNLOAD</button>
    654     <button type="button" class="button green round">DOWNLOAD</button>
    655     <button type="button" class="button blue round">DOWNLOAD</button>
    656  
    657     <button type="button" class="button gray side">DOWNLOAD</button>
    658     <button type="button" class="button black side">DOWNLOAD</button>
    659     <button type="button" class="button red side">DOWNLOAD</button>
    660     <button type="button" class="button yellow side">DOWNLOAD</button>
    661     <button type="button" class="button green side">DOWNLOAD</button>
    662     <button type="button" class="button blue side">DOWNLOAD</button>
    663  
    664     <button type="button" class="button gray tags">SIGN UP</button>
    665     <button type="button" class="button black tags">SIGN UP</button>
    666     <button type="button" class="button red tags">SIGN UP</button>
    667     <button type="button" class="button yellow tags">SIGN UP</button>
    668     <button type="button" class="button green tags">SIGN UP</button>
    669     <button type="button" class="button blue tags">SIGN UP</button>
    670  
    671     <button type="button" class="button gray rarrow">LEARN MORE</button>
    672     <button type="button" class="button black rarrow">LEARN MORE</button>
    673     <button type="button" class="button red rarrow">LEARN MORE</button>
    674     <button type="button" class="button yellow rarrow">LEARN MORE</button>
    675     <button type="button" class="button green rarrow">LEARN MORE</button>
    676     <button type="button" class="button blue rarrow">LEARN MORE</button>
    677  
    678     <button type="button" class="button gray larrow">GO BACK</button>
    679     <button type="button" class="button black larrow">GO BACK</button>
    680     <button type="button" class="button red larrow">GO BACK</button>
    681     <button type="button" class="button yellow larrow">GO BACK</button>
    682     <button type="button" class="button green larrow">GO BACK</button>
    683     <button type="button" class="button blue larrow">GO BACK</button>
    684 </div>    
    685     </section>
    686 </div>
    687 </body>
    688 </html>

    原文地址:http://www.codefans.net/jscss/code/3752.shtml

  • 相关阅读:
    winform+c#之窗体之间的传值 Virus
    ASP.NET 2.0 利用 checkbox获得选中行的行号, 在footer中显示 Virus
    .NET中的winform的listview控件 Virus
    我的书橱
    Expert .NET 2.0 IL Assembler·译者序一 写在一稿完成之即
    Verbal Description of Custom Attribute Value
    AddressOfCallBacks in TLS
    下一阶段Schedule
    2008 Oct MVP OpenDay 第二天 博客园聚会
    2008 Oct MVP OpenDay 第二天 颁奖·讲座·晚会
  • 原文地址:https://www.cnblogs.com/antik/p/3927128.html
Copyright © 2011-2022 走看看