【HTML】
　HTMLのコードはこれが全てです。

<div class="box-button">
  <span class="btn push">ボタンを押すと凹みます</span>
</div>

【CSS】
　.box-buttonというボックスを縁取りをして、細線で囲みます。
　ボックス内では、textが中央に位置します。

.box-button {
  margin:40px;
  padding: 40px;
  border: 1px solid #87ceeb;
  text-align: center;
}

　. btn：ボタンの形を整えます。
　文字色は白。
　ボタンはinline-blockにしてブロック要素で扱えるようにします。
　透明度を0.8にして薄く透けう設定。
　ボタンの隅は丸角にします。

.btn {
/*  padding: 8px 24px;*/
  padding: 20px 60px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 5px;
}

【CSS】
　ボタンをhoverしている間、透明度を１にしてはっきりと表示させます。
　また、カーソルはポインターを使用します。

.btn:hover {
  cursor: pointer;
  opacity: 1;
}

【CSS】
　ボタンの色を薄めの色にします。
　少し濃い目の色でボタンの下に影を作ります。

.push {
  background-color: #6495ed;
  box-shadow: 0 8px #4169e1;
}

【CSS】
　activeと判断した時に、ボタン位置を下にずらす。
　同時に、ボタンの下の影を消す。
　ボタンが押されて凹む動作を実現しました。

.push:active {
  position: relative;
  top: 8px;
  box-shadow: none;
}