さぁ!検索しよう!

CSSでクリックしている間は凹み、クリックを止めると元に戻るボタンの作り方を解説します。

一般的にCSSでボタンを作る際は下記のように、a要素をdisplay:block;でブロック要素にしbackground-colorプロパティでカラーを決め、:hover疑似クラスでカーソルを乗せたときにカラーが変化するようにして表現することかと思います。

しかし、今回は上記の方法ではない、より現実世界のボタンに近い操作性を持った押した感覚のあるボタンをCSSのみで表現する方法を解説します。

始めに完成品をご覧ください。

完成デモ

続いて、各ソースコードを解説します。

始めにHTMLです。

HTML

<a href="#">click!</a>

次にCSSです。

CSS

a {
 background:#cccc99;
 border-radius:3px;
 color:#333;
 display:block;
 font-weight:bold;
 padding:20px;
 text-align:center;
 text-decoration:none;
 transition:all 0.5s;
 width:10%;
}
a:hover {
 background:#ffffcc;
 color:#ccc;
}

上記のCSSで最も重要な箇所はa:activeです。:active:hover等と同類で、セレクタの後に記述する疑似クラスと呼ばれるものですが、振る舞いが異なり要素がクリックされてから離れるまでのスタイルを指定します。

よってボタンがクリックされるとa:activeが有効となり、box-shadow:none;で影が消えると同時に、position:relative;top:7px;でボタンの相対位置を上から7px下げることでボタンの凹みを表現しています。

以上です。