こんばんは、今日はまたまたボタンの記事です！

皆さんボタンをクリックしたときにほんとにボタンが押されているように見せるボタン作れるってすごくないですか？

ポイントは

１．box-shadowで影をつける

２．押下時に、box-shadowを消す

３．押下時に、影の分だけ表示位置を下にずらす

という動作だけですね！

まずは要素の表示位置を変えるとこですね。

positionというプロパティをつかいます、コードで書くと

.btn:active{

position:relative;

top:6px;

left:10px;

}

このコードでボタンを基準の位置からずらしたりできます。

クリック時に、以下の処理をすることによって、ボタンがへこんで見えるようになります。
・box-shadowをnoneにする
・position: relative;とtopによって影の分だけ位置を下げる

解りますか？www

これだけでとても簡単に影をつけただけのボタンよりも、よりリアルなボタンが作れます！みなさんも是非ためしてみてください！