実際のボタンを押したような効果を実装するCSS

2019.04.4

クリックできることをわかりやすくするCSSは色々ありますが、個人的に一番わかりやすいのはhover時にボタンが沈み込むアニメーションだと思っています。
今回はそれをCSSだけで実装する方法を紹介します。

実装方法

HTML

HTMLは下記のようにします。サンプルなんでシンプルな形ですが、基本的にはどのようにしても大丈夫です。

<p class="button"><a href="">button</a></p>

CSS

CSSは次のように記述します。

.button a {
    width: 280px;
    background-color: #666;
    border-radius: 8px;
    color: #ffffff;
    display: block;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    padding: 10px 0;
    box-shadow: 0 3px 0 rgba(0,0,0,1);
    transition: all 0.3s;
    margin: 0 auto;
}
.button a:hover {
    box-shadow: none;
    transform: translate3d(0, 3px, 0);
}

See the Pen
NmxGZY by keitasakurai (@mdesignyokohama)
on CodePen.

説明

ボタンにbox-shadowをかけることで実際のボタンのような立体感を表現します。そして、hover時にその立体効果を消しています。

そして、それと同時にtransform: translate3dを指定することで、ボタンを下方向に動かすということです。transformのカッコ内の数字は「X軸, Y軸, Z軸」を指定するので、真ん中の数字、つまりY軸をbox-shadowで指定した影の長さと同じ分動かせば、ボタンを実際に押したように見えます。