html中button的立体效果圆角，前端开发学习

margin: 10px;

padding: 0 20px;

text-align: center;

text-decoration: none;

font: bold 12px/25px Arial, sans-serif;

text-shadow: 1px 1px 1px rgba(255,255,255, .22);

-webkit-border-radius: 30px;

-moz-border-radius: 30px;

border-radius: 30px;

-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

-webkit-transition: all 0.15s ease;

-moz-transition: all 0.15s ease;

-o-transition: all 0.15s ease;

-ms-transition: all 0.15s ease;

transition: all 0.15s ease;

}

立体效果

/* Green Color */

.green {

color: #3e5706;

background: #a5cd4e; /* Old browsers */

bac