【HTML,CSS】立体的なボタンを作成する
こんにちはYsです。
今日は、HTMLとCSSを使用した立体的なボタンの作成方法で記事を書いていきます。
現在、Ruby on Railsを使用した自分のオリジナルWebアプリを作成しています。
画面を作成している段階で、以下のような立体的なボタンはよく作るので、そのコツをこのブログに残しておきます。
スポンサードサーチ
HTMLを記述する
まずは、ボタン用のHTMLを用意します。
divタグ枠を作成して、要素のクラス名は分かりやすいように今回は「btn」とします。
<div class="btn">ボタン</div> CSSを記述する
立体的なボタンを作成する上で、必須事項は以下の2点。
- 要素に影を付ける
- ボタンを押した際に影の分だけ要素を移動させる
要素に影を付ける
cssで要素に影を付けるプロパティは、box-shadowプロパティを使用します。
box-shadow: 水平方向 垂直方向 ぼかし具合 色
box-shadow: 0 4px 6px #7e8183e6;詳しいbox-shadowプロパティの記述について知りたいという方は、以下のリファレンスを参照にしてみてください。
ボタンを押した際に影の分だけ要素を移動させる
上記で影を付けたことにより、ボタンが浮いたような感じになりました。
ただ、これでは影を付けただけなので次は実際にボタンを押したような挙動になるようにします。
- ボタンを押した際に動作するCSS（activeプロパティ）を記述
- 影を打ち消す
- 影を付与した分の要素の移動
ボタンを押した際に動作するCSS（activeプロパティ）を記述
ボタンを押した際にCSSの挙動を変えたいので、:activeプロパティを使用します。
記述の仕方は以下の通り
.セレクタ:active
影を打ち消す
押した際に影が残っている訳には行かないので「none」を使用して、box-shadowを打ち消します。
box-shadow: none
ボタンを押した際に動作するCSS（activeプロパティ）を記述
現状、box-shadowプロパティを使用して、6pxぼかしを記述しています。
そのため、ボタンを押した際に上から6px押し込むように要素を移動させると、沈み込んだような動作になります。
※topを記載するとき、positonプロパティが必須なので合わせて追記します。
top: 6px position: relative;
完成版
上記のポイントを抑えながら作成したボタンが以下になります。
ボタンのデザイン、配置といった事はお好みで。
<html>
<body>
<div class="btn">ボタン</div>
</body>
</html>
<style>
.btn {
background-color: #00D1D6;
padding: 10px;
max-width: 250px;
border-radius: 5px;
text-align: center;
margin: 30px auto;
color: white;
box-shadow: 0 4px 6px #7e8183e6;
}
.btn:active {
box-shadow: none;
position: relative;
top: 6px;
}
</style>スポンサードサーチ
補足
上記で載せてあるGifに関しては、ボタンの上にカーソルが合ったら色をジワーッと変更するtransitionを使用しています。
好みが分れるので上記では記述していませんが、参考で載せておきます。
ポイントはtransitionをbackground-colorのみにする事。
そうではないと、影などの消え方が不自然になります。
.btn:hover {
background-color: rgba(0, 254, 240, 0.8);
transition: background-color 0.5s;
}