css3实现底部阴影按钮

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、查看效果。