@import "http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"; body { font:13px/20px "Lucida Grande",Tahoma,Verdana,sans-serif; color:#404040; background:#f8f6f6; } .container { zoom:1; } .container:before,.container:after { content:''; display:table; } .container:after { clear:both; } .column { position:relative; z-index:1; float:left; width:25%; padding:30px 0; text-align:center; white-space:nowrap; } .column .button + .button { margin-left:20px; } @media screen and (max-width:800px) { .column { width:50%; } }@media screen and (max-width:400px) { .column { width:100%; } }.button { display:inline-block; position:relative; height:33px; line-height:33px; padding:0 15px; font-size:15px; color:white; text-decoration:none; text-shadow:0 -1px rgba(0,0,0,0.3); border:2px solid; border-radius:7px; outline:0; -webkit-box-shadow:0 2px 1px rgba(0,0,0,0.25); box-shadow:0 2px 1px rgba(0,0,0,0.25); } .button:before,.button:after { content:''; position:absolute; } .button:before { top:-5px; bottom:-5px; left:-5px; right:-5px; z-index:-1; border-radius:9px; } .button:after { top:0; bottom:0; right:0; left:0; border:2px solid rgba(255,255,255,0.1); border-bottom:0; border-radius:7px; } .button.alt { -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25); box-shadow:0 1px 3px rgba(0,0,0,0.25); } .button.alt:before { display:none; } .column.red { background:#d04022; } .button.red { background:#d02e17; border-color:#942110 #902010 #741a0d; background-image:-webkit-linear-gradient(top,#e74a29 0%,#e6451b 50%,#d02e17 50%,#b3150b 100%); background-image:-moz-linear-gradient(top,#e74a29 0%,#e6451b 50%,#d02e17 50%,#b3150b 100%); background-image:-o-linear-gradient(top,#e74a29 0%,#e6451b 50%,#d02e17 50%,#b3150b 100%); background-image:linear-gradient(to bottom,#e74a29 0%,#e6451b 50%,#d02e17 50%,#b3150b 100%); } .button.red:before { background:#ee442c; background-image:-webkit-linear-gradient(top,#b32511,#f3533c); background-image:-moz-linear-gradient(top,#b32511,#f3533c); background-image:-o-linear-gradient(top,#b32511,#f3533c); background-image:linear-gradient(to bottom,#b32511,#f3533c); } .button.red:active { background:#e63b1b; background-image:-webkit-linear-gradient(top,#a9110b 0%,#de3819 60%,#e63b1b 100%); background-image:-moz-linear-gradient(top,#a9110b 0%,#de3819 60%,#e63b1b 100%); background-image:-o-linear-gradient(top,#a9110b 0%,#de3819 60%,#e63b1b 100%); background-image:linear-gradient(to bottom,#a9110b 0%,#de3819 60%,#e63b1b 100%); } .button.red:active:after { border-color:#e63b1b; } .column.blue { background:#4071b6; } .button.blue { background:#3471b8; border-color:#255184 #244f80 #1e4068; background-image:-webkit-linear-gradient(top,#497fcc 0%,#3d72c8 50%,#3471b8 50%,#2365a0 100%); background-image:-moz-linear-gradient(top,#497fcc 0%,#3d72c8 50%,#3471b8 50%,#2365a0 100%); background-image:-o-linear-gradient(top,#497fcc 0%,#3d72c8 50%,#3471b8 50%,#2365a0 100%); background-image:linear-gradient(to bottom,#497fcc 0%,#3d72c8 50%,#3471b8 50%,#2365a0 100%); } .button.blue:before { background:#4c8ad3; background-image:-webkit-linear-gradient(top,#29609f,#5995da); background-image:-moz-linear-gradient(top,#29609f,#5995da); background-image:-o-linear-gradient(top,#29609f,#5995da); background-image:linear-gradient(to bottom,#29609f,#5995da); } .button.blue:active { background:#3d79c8; background-image:-webkit-linear-gradient(top,#216298 0%,#3774c4 60%,#3d79c8 100%); background-image:-moz-linear-gradient(top,#216298 0%,#3774c4 60%,#3d79c8 100%); background-image:-o-linear-gradient(top,#216298 0%,#3774c4 60%,#3d79c8 100%); background-image:linear-gradient(to bottom,#216298 0%,#3774c4 60%,#3d79c8 100%); } .button.blue:active:after { border-color:#3d79c8; } .column.green { background:#429538; } .button.green { background:#3e952d; border-color:#29621e #275e1c #1d4715; background-image:-webkit-linear-gradient(top,#45b436 0%,#3ca933 50%,#3e952d 50%,#337c1d 100%); background-image:-moz-linear-gradient(top,#45b436 0%,#3ca933 50%,#3e952d 50%,#337c1d 100%); background-image:-o-linear-gradient(top,#45b436 0%,#3ca933 50%,#3e952d 50%,#337c1d 100%); background-image:linear-gradient(to bottom,#45b436 0%,#3ca933 50%,#3e952d 50%,#337c1d 100%); } .button.green:before { background:#4ac233; background-image:-webkit-linear-gradient(top,#317c22,#52d039); background-image:-moz-linear-gradient(top,#317c22,#52d039); background-image:-o-linear-gradient(top,#317c22,#52d039); background-image:linear-gradient(to bottom,#317c22,#52d039); } .button.green:active { background:#42a933; background-image:-webkit-linear-gradient(top,#31741b 0%,#3fa131 60%,#42a933 100%); background-image:-moz-linear-gradient(top,#31741b 0%,#3fa131 60%,#42a933 100%); background-image:-o-linear-gradient(top,#31741b 0%,#3fa131 60%,#42a933 100%); background-image:linear-gradient(to bottom,#31741b 0%,#3fa131 60%,#42a933 100%); } .button.green:active:after { border-color:#42a933; } .column.cyan { background:#39a4b2; } .button.cyan { background:#2eabb3; border-color:#20797e #1f757a #195d62; background-image:-webkit-linear-gradient(top,#3dbdcd 0%,#33b2c7 50%,#2eabb3 50%,#1e9a99 100%); background-image:-moz-linear-gradient(top,#3dbdcd 0%,#33b2c7 50%,#2eabb3 50%,#1e9a99 100%); background-image:-o-linear-gradient(top,#3dbdcd 0%,#33b2c7 50%,#2eabb3 50%,#1e9a99 100%); background-image:linear-gradient(to bottom,#3dbdcd 0%,#33b2c7 50%,#2eabb3 50%,#1e9a99 100%); } .button.cyan:before { background:#3fccd5; background-image:-webkit-linear-gradient(top,#249299,#4dd3dc); background-image:-moz-linear-gradient(top,#249299,#4dd3dc); background-image:-o-linear-gradient(top,#249299,#4dd3dc); background-image:linear-gradient(to bottom,#249299,#4dd3dc); } .button.cyan:active { background:#33b9c7; background-image:-webkit-linear-gradient(top,#1d918f 0%,#31b2bf 60%,#33b9c7 100%); background-image:-moz-linear-gradient(top,#1d918f 0%,#31b2bf 60%,#33b9c7 100%); background-image:-o-linear-gradient(top,#1d918f 0%,#31b2bf 60%,#33b9c7 100%); background-image:linear-gradient(to bottom,#1d918f 0%,#31b2bf 60%,#33b9c7 100%); } .button.cyan:active:after { border-color:#33b9c7; } .column.brown { background:#c5aa3b; } .button.brown { background:#c8a22e; border-color:#927622 #8e7321 #755f1b; background-image:-webkit-linear-gradient(top,#d5ba4a 0%,#d2ba3d 50%,#c8a22e 50%,#af821e 100%); background-image:-moz-linear-gradient(top,#d5ba4a 0%,#d2ba3d 50%,#c8a22e 50%,#af821e 100%); background-image:-o-linear-gradient(top,#d5ba4a 0%,#d2ba3d 50%,#c8a22e 50%,#af821e 100%); background-image:linear-gradient(to bottom,#d5ba4a 0%,#d2ba3d 50%,#c8a22e 50%,#af821e 100%); } .button.brown:before { background:#dcb94d; background-image:-webkit-linear-gradient(top,#ae8c24,#e3c15b); background-image:-moz-linear-gradient(top,#ae8c24,#e3c15b); background-image:-o-linear-gradient(top,#ae8c24,#e3c15b); background-image:linear-gradient(to bottom,#ae8c24,#e3c15b); } .button.brown:active { background:#d2b33d; background-image:-webkit-linear-gradient(top,#a6791d 0%,#d0af35 60%,#d2b33d 100%); background-image:-moz-linear-gradient(top,#a6791d 0%,#d0af35 60%,#d2b33d 100%); background-image:-o-linear-gradient(top,#a6791d 0%,#d0af35 60%,#d2b33d 100%); background-image:linear-gradient(to bottom,#a6791d 0%,#d0af35 60%,#d2b33d 100%); } .button.brown:active:after { border-color:#d2b33d; } .column.pink { background:#b53686; } .button.pink { background:#b62b89; border-color:#801e61 #7c1d5e #63184b; background-image:-webkit-linear-gradient(top,#d03998 0%,#cb308c 50%,#b62b89 50%,#9c1c7b 100%); background-image:-moz-linear-gradient(top,#d03998 0%,#cb308c 50%,#b62b89 50%,#9c1c7b 100%); background-image:-o-linear-gradient(top,#d03998 0%,#cb308c 50%,#b62b89 50%,#9c1c7b 100%); background-image:linear-gradient(to bottom,#d03998 0%,#cb308c 50%,#b62b89 50%,#9c1c7b 100%); } .button.pink:before { background:#d83ca6; background-image:-webkit-linear-gradient(top,#9c2174,#df4aae); background-image:-moz-linear-gradient(top,#9c2174,#df4aae); background-image:-o-linear-gradient(top,#9c2174,#df4aae); background-image:linear-gradient(to bottom,#9c2174,#df4aae); } .button.pink:active { background:#cb3093; background-image:-webkit-linear-gradient(top,#941a77 0%,#c22e8d 60%,#cb3093 100%); background-image:-moz-linear-gradient(top,#941a77 0%,#c22e8d 60%,#cb3093 100%); background-image:-o-linear-gradient(top,#941a77 0%,#c22e8d 60%,#cb3093 100%); background-image:linear-gradient(to bottom,#941a77 0%,#c22e8d 60%,#cb3093 100%); } .button.pink:active:after { border-color:#cb3093; } .column.purple { background:#7351b7; } .button.purple { background:#6440be; border-color:#4a2f8c #482e89 #3c2672; background-image:-webkit-linear-gradient(top,#825ec9 0%,#7d53c5 50%,#6440be 50%,#482da8 100%); background-image:-moz-linear-gradient(top,#825ec9 0%,#7d53c5 50%,#6440be 50%,#482da8 100%); background-image:-o-linear-gradient(top,#825ec9 0%,#7d53c5 50%,#6440be 50%,#482da8 100%); background-image:linear-gradient(to bottom,#825ec9 0%,#7d53c5 50%,#6440be 50%,#482da8 100%); } .button.purple:before { background:#8161d0; background-image:-webkit-linear-gradient(top,#5534a7,#8c6ed8); background-image:-moz-linear-gradient(top,#5534a7,#8c6ed8); background-image:-o-linear-gradient(top,#5534a7,#8c6ed8); background-image:linear-gradient(to bottom,#5534a7,#8c6ed8); } .button.purple:active { background:#7753c5; background-image:-webkit-linear-gradient(top,#432ba0 0%,#714bc2 60%,#7753c5 100%); background-image:-moz-linear-gradient(top,#432ba0 0%,#714bc2 60%,#7753c5 100%); background-image:-o-linear-gradient(top,#432ba0 0%,#714bc2 60%,#7753c5 100%); background-image:linear-gradient(to bottom,#432ba0 0%,#714bc2 60%,#7753c5 100%); } .button.purple:active:after { border-color:#7753c5; } .column.gray { background:#9e9e9e; } .button.gray { background:#999999; border-color:#787878 #757575 #666666; background-image:-webkit-linear-gradient(top,#adadad 0%,#a6a6a6 50%,#999999 50%,#8e7b7c 100%); background-image:-moz-linear-gradient(top,#adadad 0%,#a6a6a6 50%,#999999 50%,#8e7b7c 100%); background-image:-o-linear-gradient(top,#adadad 0%,#a6a6a6 50%,#999999 50%,#8e7b7c 100%); background-image:linear-gradient(to bottom,#adadad 0%,#a6a6a6 50%,#999999 50%,#8e7b7c 100%); } .button.gray:before { background:#b6afaf; background-image:-webkit-linear-gradient(top,#8b8484,#c2b7b7); background-image:-moz-linear-gradient(top,#8b8484,#c2b7b7); background-image:-o-linear-gradient(top,#8b8484,#c2b7b7); background-image:linear-gradient(to bottom,#8b8484,#c2b7b7); } .button.gray:active { background:#a6a6a6; background-image:-webkit-linear-gradient(top,#8a7577 0%,#a1a1a1 60%,#a6a6a6 100%); background-image:-moz-linear-gradient(top,#8a7577 0%,#a1a1a1 60%,#a6a6a6 100%); background-image:-o-linear-gradient(top,#8a7577 0%,#a1a1a1 60%,#a6a6a6 100%); background-image:linear-gradient(to bottom,#8a7577 0%,#a1a1a1 60%,#a6a6a6 100%); } .button.gray:active:after { border-color:#a6a6a6; } .lt-ie9 .button:before { display:none; }
更新时间:2019-08-27 00:01:09