标签：style blog http color 使用 os io for
本页面向大家展开了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>
原文地址：http://www.codefans.net/jscss/code/3752.shtml
36种漂亮的网页Button按钮样式,布布扣,bubuko.com
标签：style blog http color 使用 os io for
原文地址：http://www.cnblogs.com/antik/p/3927128.html
