CSS功能组件——3D点击动效按钮

样式

<style>
.box{height:800px; text-align:center;}
.box:after{display:inline-block; height:100%; content:''; vertical-align:middle; }
/*重叠box-shadow*/
.btn{display:inline-block; width:100px; height:36px; padding:8px; font-size:16px; border:0; border:1px solid #7F9DB9; color:#666; -moz-box-shadow:1px 1px #AFC4EA, 2px 2px #AFC4EA, 3px 3px #AFC4EA; -webkit-box-shadow:1px 1px #AFC4EA, 2px 2px #AFC4EA, 3px 3px #AFC4EA; box-shadow:1px 1px #AFC4EA, 2px 2px #AFC4EA, 3px 3px #AFC4EA; background:#f0f3f9; cursor:pointer; overflow:visible; text-align:center; vertical-align:middle;}
.btn:focus{outline:0;}
.btn:hover{background:#EAEDF5;}
/*动效*/
.btn:active{-ms-transform:translate(1px,1px); transform:translate(1px,1px); -moz-box-shadow:1px 1px #AFC4EA, 2px 2px #AFC4EA; -webkit-box-shadow:1px 1px #AFC4EA, 2px 2px #AFC4EA; box-shadow:1px 1px #AFC4EA, 2px 2px #AFC4EA;}
</style>

html

<div class="box">
    <input type="submit" class="btn" value="submit">
</div>