本页面向大家展开了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

转载于:https://www.cnblogs.com/antik/p/3927128.html

36种漂亮的网页Button按钮样式相关推荐

  1. button按钮样式_各种好看的小按钮合集，纯css编写，最近在学习时遇到的，记录成为笔记...

    写在前面 最近忙着实习的事,前往广州,租房,置办东西等等.用碎片化的时间看了一些博客,也看到不少我认为很不错的通过纯css来打造的按钮样式.记录下来以后开发的时候或许能用上. 亮起来按钮 < 简 ...

  2. RT-Thread 模拟器 simulator LVGL控件：button 按钮样式

    环境搭建 RT-Thread 4.1.0 BSP 模拟器 simulator LVGL软件包 功能 LVGL 画两个按钮,点击按钮,产生按钮事件 按钮应用[样式],看起来美观一点 方法 按钮控件,LV ...

  3. button按钮样式_一篇文章带你了解CSS3按钮知识

    在实际开发中,按钮的应用是必不可少.使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式. 一.平面样式CSS按钮 平面样式按钮的使用现在非常流行,并且符合无处不在的平面设计趋势 ...

  4. Eclipse Button按钮样式简单样式

    1.首先创建一个Button控件 <Buttonandroid:id="@+id/button1"android:layout_width="110dp" ...

  5. button按钮样式

    在许多网站中都需要实用到按钮,一个好看实用的css按钮即可以给访问者以美感,又可以方便开发者.下面就是一个纯css按钮,需要的可以参考. css代码 .div {display: inline-blo ...

  6. 【AndroidUI设计】Button按钮样式设计（xmlns-shape及项目开发中的使用展示）

    文章目录 一.简述 二.xmlns-shape 1.了解 2.深入了解corners (1)图示 (2)属性 三.UI设计 1.圆角按钮 2.圆形按钮 3.普通按钮 4.圆角搜索组合按钮 四.具体使用 ...

  7. html button形状,一个清爽的button按钮样式

    效果如下: 复制代码代码如下: .clear { /* generic container (i.e. div) for floating buttons */ overflow: hidden; w ...

  8. Android 自定义Button按钮显示样式（正常、按下、获取焦点）

    2019独角兽企业重金招聘Python工程师标准>>> 现在的用户对APP的外观看得很重要,如果APP内所有元件都用Android默认样式写,估计下面评论里就有一堆在骂UI丑的.今天 ...

  9. android 自定义控件 焦点,Android 自定义Button按钮显示样式（正常、按下、获取焦点）...

    现在的用户对APP的外观看得很重要,如果APP内所有元件都用Android默认样式写,估计下面评论里就有一堆在骂UI丑的.今天学习自定义Button按钮样式.Button样式修改的是Button的背景 ...

最新文章

  1. Android之PullToRefresh(ListView 、GridView 、WebView)使用详解和总结
  2. Spring 4.2中由注释驱动的事件侦听器
  3. AngularJS中实现显示或隐藏动画效果的3种方式
  4. （34）FPGA原语设计（BUFGMUX）
  5. spark学习-68-源代码：driver端接收executor的心跳
  6. “unzip”不是内部或外部命令，也不是可运行的程序或批处理文件
  7. 红黑树相关定理及其证明
  8. Flat UI Colors——扁平化配色参考
  9. python 切割_Python切割九宫格图
  10. 黑马java学习笔记4 强化部分 常见API
  11. java中怎样显示图片_[Java教程]Java中显示图片的方法
  12. 开源项目之开源的2D游戏引擎 HGE
  13. 全新安装Windows10系统（PE下）
  14. 深谈SCI论文写作技巧
  15. #USACO#Island Travels
  16. 解决山石设备无法使用最新版chromeflash功能(91版本及以上)
  17. java学生通讯录_简单实现Java通讯录系统
  18. html中去除浮漂有什么作用,鱼漂吃铅量大、和吃铅量小都有啥优点？
  19. 谷歌SEO老域名攻略
  20. Apache ShardingSphere 毕业成为 Apache 顶级项目，系业界首个 Apache 分布式数据库中间件项目

热门文章

  1. J2me xmlReader的轻量级实现
  2. 个人使用华为云服务器的经验分享
  3. 如何隐藏公共 IP 地址，进行 DDos
  4. 2021-11-16派森编程学习笔记“上帝视角下的游戏操盘手” 通过类的继承学会了复用代码，减少代码冗余，提高编程效率。
  5. 人物画像————圆球转动效果
  6. 基于Vue+Vant的旅游WebApp的设计与实现
  7. 微信公众平台接口调试工具——蓝牙设备调试篇
  8. 小小盗号VC实现原理
  9. python手机屏幕控制,使用Python的控制屏幕
  10. flume学习之一 是什么，主要应用在什么场景