.box{
    width: 770px;
    /*text-align: center;*/
    line-height: 46px;
    margin: 20px 0px 0px 0px ;

}
.btn{
    position: relative;
    font-weight:bold;
    width: 80px;
    height: 44px;
    border-radius: 3px;
    border: 1px solid #c0c0c0;
    margin:0px 5px 20px 0px;

}


.btn:nth-child(n){
    color: black;
   /* border-color: #2b9fd9;*//*#306DFB EFF0F4*/
    background: #EFF0F4;
    /*box-shadow:inset 0 1px 0 #6accf6,0 1px 0 rgba(0,0,0,.2);
    background:-webkit-linear-gradient(top,#38bbf3,#2ca2e3);
    background:-moz-linear-gradient(top,#38bbf3,#2ca2e3);
    background:linear-gradient(top,#38bbf3,#2ca2e3);*/
}
.btn:nth-child:hover(n){
    background:-webkit-linear-gradient(top,#6ad2ff,#3fafed);
    background:-moz-linear-gradient(top,#6ad2ff,#3fafed);
    background:-ms-linear-gradient(top,#6ad2ff,#3fafed);
    background:-o-linear-gradient(top,#6ad2ff,#3fafed);
    background:linear-gradient(top,#6ad2ff,#3fafed);
}
.btn:nth-child:active(n){
    top:4px;
    box-shadow:inset 0 1px 3px #EFF0F4;
    background:-webkit-linear-gradient(top,#4ea5d5,#4ea5d5);
    background:-moz-linear-gradient(top,#4ea5d5,#4ea5d5);
    background:-o-linear-gradient(top,#4ea5d5,#4ea5d5);
    background:-ms-linear-gradient(top,#4ea5d5,#4ea5d5);
    background:linear-gradient(top,#4ea5d5,#4ea5d5);
}
.btn:before,
.btn:after{
    position: absolute;
    content: "";
    height: 50%;
    border-radius: 50%;
    z-index: -1;
}
.btn:before {
    width: 90%;
    left: 5%;
    top:12%;
    box-shadow: 0 -7px 4px rgba(0,0,0,0.3);
}
.btn:active:before {
    width: 90%;
    left: 5%;
    top:12%;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
.btn:after {
    width: 80%;
    left: 10%;
    bottom: 9%;
    box-shadow: 0 7px 4px rgba(0,0,0,0.4);
}
.btn:active:after {
    width: 80%;
    left: 10%;
    bottom: 9%;
    box-shadow: 0 0 0 rgba(0,0,0,0.4);
}
.box p:last-child{
    font-size: 20px;
    font-weight: bold;
}
.box p:last-child span{
    color: #fff;
}