【コピペ用】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
にして影を消す。
以上で実装完了。
へこむボタンの完成です。
まとめ
ボタンぽく見せることで視認性が良くなり、クリックされやすくなります。
アフィリエイトをやってる方にはおすすめです。
以上で解説を終わります。
目次