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

以上で実装完了。

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

まとめ

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

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

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

Ads

関連記事

HTMLCSS プログラミング

【簡単】CSSを使って要素を非表示にせず、要素内のテキストだけ見た目上消す方法

2022.01.19
88
HTMLCSS プログラミング

CSSだけでhover(ホバー)したら画像を拡大させる方法【jQuery不要】

2022.01.03
33
HTMLCSS プログラミング

form(フォーム)タグでエンターキー送信を無効にする方法

2021.12.21
104
HTMLCSS プログラミング

スマホなどでaタグのリンクが2回タップしないと機能しない原因

2021.01.17
440