1、新建html文档。
2、书写hmtl代码。<div class="page"><header id="header"> <hgrounp class="blank"> <h1></h1> <h2> <h2> </hgrounp></header><section class="demo"> <div class="box"> <div class="form-actions"> <button type="button" class="btn">Click Me</button> </div> </div></section></div>
3、初始化css代码。<style>* { margin: 0; padding: 0 }html { overflow-y: scroll }body { background: #dcdcdc; }.box { width: 550px; text-align: center; line-height: 46px; margin: 40px auto; }</style>
4、书写css代码。.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: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; }
5、代码整体结构。
6、查看效果。
