Written by Kasumi

【コピペ用】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にして影を消す。

以上で実装完了。

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

まとめ

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

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

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

目次

関連記事

HTMLCSS

画像をPCとスマホで切り替える方法【結論:picture要素を使おう】

2022.06.25
792
HTMLCSS

【sass】@contentを使ってmediaクエリを簡略化する方法

2023.04.24
198
HTMLCSS

CSSで直前・後方の兄弟要素を指定する方法

2023.04.27
263
HTMLCSS

【CSS】テキストを中央配置にして左寄せにする方法

2022.10.04
377