<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css3实现底部阴影按钮 - 网页模板</title>
<style type="text/css">
body{
background: #dcdcdc;
}
.box{
width: 550px;
text-align: center;
line-height: 46px;
margin:40px auto;
}
.btn{
position: relative;
font-weight:bold;
width: 124px;
height: 44px;
border-radius: 3px;
border: 1px solid #c0c0c0;
margin:0 50px 40px 0;
}
.btn:nth-child(3n){
margin-right: 0;
}
.btn:nth-child(1){
color: #8c3e4a;
border-color: #ed7989;
box-shadow:inset 0 1px 0 #f9a1b1,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#f78297,#f56c7e);
background:-moz-linear-gradient(top,#f78297,#f56c7e);
background:-o-linear-gradient(top,#f78297,#f56c7e);
background:-ms-linear-gradient(top,#f78297,#f56c7e);
background:linear-gradient(top,#f78297,#f56c7e);
}
.btn:nth-child(1):hover{
background:-webkit-linear-gradient(top,#fbacbb,#f4798f);
background:-moz-linear-gradient(top,#fbacbb,#f4798f);
background:-o-linear-gradient(top,#fbacbb,#f4798f);
background:-ms-linear-gradient(top,#fbacbb,#f4798f);
background:linear-gradient(top,#fbacbb,#f4798f);
}
.btn:nth-child(1):active{
top:4px;
box-shadow:inset 0 1px 3px #aa2c3d;
background:-webkit-linear-gradient(top,#e15c6d,#e15c6d);
background:-moz-linear-gradient(top,#e15c6d,#e15c6d);
background:-o-linear-gradient(top,#e15c6d,#e15c6d);
background:-ms-linear-gradient(top,#e15c6d,#e15c6d);
background:linear-gradient(top,#e15c6d,#e15c6d);
}
.btn:nth-child(2){
color: #a67ea0;
border-color: #e6addf;
box-shadow:inset 0 1px 0 #ffdcfb,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#ffd0f9,#ffc2f7);
background:-moz-linear-gradient(top,#ffd0f9,#ffc2f7);
background:-o-linear-gradient(top,#ffd0f9,#ffc2f7);
background:-ms-linear-gradient(top,#ffd0f9,#ffc2f7);
background:linear-gradient(top,#ffd0f9,#ffc2f7);
}
.btn:nth-child(2):hover{
background:-webkit-linear-gradient(top,#ffdefb,#fdc7f6);
background:-moz-linear-gradient(top,#ffdefb,#fdc7f6);
background:-o-linear-gradient(top,#ffdefb,#ffc2f7);
background:-ms-linear-gradient(top,#ffdefb,#ffc2f7);
background:linear-gradient(top,#ffdefb,#ffc2f7);
}
.btn:nth-child(2):active{
top:4px;
box-shadow:inset 0 1px 3px #be27aa;
background:-webkit-linear-gradient(top,#f3b0ea,#f3b0ea);
background:-moz-linear-gradient(top,#f3b0ea,#f3b0ea);
background:-o-linear-gradient(top,#f3b0ea,#f3b0ea);
background:-ms-linear-gradient(top,#f3b0ea,#f3b0ea);
background:linear-gradient(top,#f3b0ea,#f3b0ea);
}
.btn:nth-child(3){
color: #923e3e;
border-color: #b74545;
box-shadow:inset 0 1px 0 #fe8585,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#fd5c5c,#fd4a4a);
background:-moz-linear-gradient(top,#fd5c5c,#fd4a4a);
background:-ms-linear-gradient(top,#fd5c5c,#fd4a4a);
background:-o-linear-gradient(top,#fd5c5c,#fd4a4a);
background:linear-gradient(top,#fd5c5c,#fd4a4a);
}
.btn:nth-child(3):hover{
background:-webkit-linear-gradient(top,#fd8d8d,#ff6161);
background:-moz-linear-gradient(top,#fd8d8d,#ff6161);
background:-o-linear-gradient(top,#fd8d8d,#ff6161);
background:-ms-linear-gradient(top,#fd8d8d,#ff6161);
background:linear-gradient(top,#fd8d8d,#ff6161);
}
.btn:nth-child(3):active{
top:4px;
box-shadow:inset 0 1px 3px #a31818;
background:-webkit-linear-gradient(top,#d43535,#d43535);
background:-moz-linear-gradient(top,#d43535,#d43535);
background:-ms-linear-gradient(top,#d43535,#d43535);
background:-o-linear-gradient(top,#d43535,#d43535);
background:linear-gradient(top,#d43535,#d43535);
}
.btn:nth-child(4){
color: #7f7f7f;
border-color: #c8c8c8;
box-shadow:inset 0 1px 0 #e0e0e0,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#d7d7d7,#b7b7b7);
background:-moz-linear-gradient(top,#d7d7d7,#b7b7b7);
background:-o-linear-gradient(top,#d7d7d7,#b7b7b7);
background:-ms-linear-gradient(top,#d7d7d7,#b7b7b7);
background:linear-gradient(top,#d7d7d7,#b7b7b7);
}
.btn:nth-child(4):hover{
background:-webkit-linear-gradient(top,#e3e3e3,#c2c0c0);
background:-moz-linear-gradient(top,#e3e3e3,#c2c0c0);
background:-o-linear-gradient(top,#e3e3e3,#c2c0c0);
background:-ms-linear-gradient(top,#e3e3e3,#c2c0c0);
background:linear-gradient(top,#e3e3e3,#c2c0c0);
}
.btn:nth-child(4):active{
top:4px;
box-shadow:inset 0 1px 3px #555;
background:-webkit-linear-gradient(top,#a2a2a2,#a2a2a2);
background:-moz-linear-gradient(top,#a2a2a2,#a2a2a2);
background:-ms-linear-gradient(top,#a2a2a2,#a2a2a2);
background:-o-linear-gradient(top,#a2a2a2,#a2a2a2);
background:linear-gradient(top,#a2a2a2,#a2a2a2);
}
.btn:nth-child(5){
color: #3295a4;
border-color: #62d4e5;
box-shadow:inset 0 1px 0 #92f3fe,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#71effe,#4be2fe);
background:-moz-linear-gradient(top,#71effe,#4be2fe);
background:-o-linear-gradient(top,#71effe,#4be2fe);
background:-ms-linear-gradient(top,#71effe,#4be2fe);
background:linear-gradient(top,#71effe,#4be2fe);
}
.btn:nth-child(5):hover{
background:-webkit-linear-gradient(top,#9df5ff,#6ce6fc);
background:-moz-linear-gradient(top,#9df5ff,#6ce6fc);
background:-o-linear-gradient(top,#9df5ff,#6ce6fc);
background:-ms-linear-gradient(top,#9df5ff,#6ce6fc);
background:linear-gradient(top,#9df5ff,#6ce6fc);
}
.btn:nth-child(5):active{
top:4px;
box-shadow:inset 0 1px 3px #1d8194;
background:-webkit-linear-gradient(top,#2bbed9,#2bbed9);
background:-moz-linear-gradient(top,#2bbed9,#2bbed9);
background:-o-linear-gradient(top,#2bbed9,#2bbed9);
background:-ms-linear-gradient(top,#2bbed9,#2bbed9);
background:linear-gradient(top,#2bbed9,#2bbed9);
}
.btn:nth-child(6){
color: #a9a056;
border-color: #ddcc52;
box-shadow:inset 0 1px 0 #fff48f,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#fff16d,#ffe647);
background:-moz-linear-gradient(top,#fff16d,#ffe647);
background:-ms-linear-gradient(top,#fff16d,#ffe647);
background:-o-linear-gradient(top,#fff16d,#ffe647);
background:linear-gradient(top,#fff16d,#ffe647);
}
.btn:nth-child(6):hover{
background:-webkit-linear-gradient(top,#fff69f,#ffea61);
background:-moz-linear-gradient(top,#fff69f,#ffea61);
background:-o-linear-gradient(top,#fff69f,#ffea61);
background:-ms-linear-gradient(top,#fff69f,#ffea61);
background:linear-gradient(top,#fff69f,#ffea61);
}
.btn:nth-child(6):active{
top:4px;
box-shadow:inset 0 1px 3px #bbac23;
background:-webkit-linear-gradient(top,#e2d12c,#e2d12c);
background:-moz-linear-gradient(top,#e2d12c,#e2d12c);
background:-o-linear-gradient(top,#e2d12c,#e2d12c);
background:-ms-linear-gradient(top,#e2d12c,#e2d12c);
background:linear-gradient(top,#e2d12c,#e2d12c);
}
.btn:nth-child(7){
color: #8f7031;
border-color: #f1c462;
box-shadow:inset 0 1px 0 #fee392,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#feda71,#f6be53);
background:-moz-linear-gradient(top,#feda71,#f6be53);
background:-ms-linear-gradient(top,#feda71,#f6be53);
background:-o-linear-gradient(top,#feda71,#f6be53);
background:linear-gradient(top,#feda71,#f6be53);
}
.btn:nth-child(7):hover{
background:-webkit-linear-gradient(top,#ffe28e,#f6c463);
background:-moz-linear-gradient(top,#ffe28e,#f6c463);
background:-ms-linear-gradient(top,#ffe28e,#f6c463);
background:-o-linear-gradient(top,#ffe28e,#f6c463);
background:linear-gradient(top,#ffe28e,#f6c463);
}
.btn:nth-child(7):active{
top:4px;
box-shadow:inset 0 1px 3px #b78421;
background:-webkit-linear-gradient(top,#e4ab3d,#e4ab3d);
background:-moz-linear-gradient(top,#e4ab3d,#e4ab3d);
background:-o-linear-gradient(top,#e4ab3d,#e4ab3d);
background:-ms-linear-gradient(top,#e4ab3d,#e4ab3d);
background:linear-gradient(top,#e4ab3d,#e4ab3d);
}
.btn:nth-child(8){
color: #678333;
border-color: #a7c570;
box-shadow:inset 0 1
