• HTMLCSS

【コピペ用】CSSでへこむボタンを作成する方法

CSSだけでへこむボタンを作成したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
凹むボタン by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

ボタン風のデザインになっており、クリックするとへこみます。

実装手順は以下の通りです。

HTML

<div class="button">ボタン</div>

まず最初にボタンのHTMLを準備します。

任意のhtmlタグを記述し、ボタンのテキスト内容を入れます。

CSS

.button{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #668ad8;/*ボタン色*/
    color: #FFF;
    border-bottom: solid 4px #627295;/*ボタンの影*/
    border-radius: 3px;
}
.button:active {/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;/*ボタンの影を消す*/
}

最後にCSSで装飾します。

ボタン風の立体に見せるにはborder-bottomプロパティを使って影を作ります。

【ボタンを押した時】を擬似要素の:activeを使って表現。プロパティに以下を付与。

transform: translateY();を使ってY軸下向き方向にボタンを移動。

border-bottomの値をnoneにして影を消す。

以上で実装完了。

へこむボタンの完成です。

まとめ

ボタンぽく見せることで視認性が良くなり、クリックされやすくなります。

アフィリエイトをやってる方にはおすすめです。

以上で解説を終わります。