首页 > 代码库 > 36种漂亮的网页Button按钮样式

36种漂亮的网页Button按钮样式

2024-07-18 18:08:45   222人阅读

本页面向大家展开了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: "\003c"; 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: "\00bb";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>


联系
我们