[CSS] コピペで使える「押せる感」「押した感」のあるボタン

公開日:2018/10/21 更新日:2018/12/28

やりたいこと

リンクボタンは、それが押せるものであるとユーザーに認識してもらうことが大切です
この押せる感を出す装飾として、ボタンに影をつけるという方法があります
せっかく影をつけて押せる感を出すなら、押したときに凹んだような動きをさせるとよりボタンっぽくなります

サンプルコード

html

<a href="#" class="btn_push">ボタン</a>

CSS

.btn_push {
    display: inline-block;
    position: relative;
    padding: 1em;
    margin: 0px 0px 5px 0px;
    width: 18em;
    background-color: #3388dd;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
.btn_push::after {
    position: absolute;
    bottom: -5px;
    left: 0px;
    width: 100%;
    height: 5px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #18548f;
    content: "";
}
.btn_push:active {
    transform: translateY(5px);
}
.btn_push:active::after {
    height: 0px;
}

仕組み、解説、補足など

:after疑似要素で影を作っています。border-radiusで角度をつけて影っぽさを出しています
:activeをhoverに変更すると、マウスオーバー時に凹むボタンになります
影の色は、PEKO STEPさんの指定した色の明るい色・暗い色を作成するツールがとても便利です

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。