HTML&CSSの立体的なボタンで動的に動かす！（影をつける＆重なったとき、クリック時の動作）

新米太郎

皆さんこんにちは新米です。

現在SE(システムエンジニア)として働いている私ですが、将来はWebデザイナーなりたいのでWEBデザインをコツコツ勉強しています。

今回、立体的なボタンを作って動的に動かす方法を学びましたので、復習がてら記事の方にまとめました。

出来上がりはこんな感じ
HTML&CSSで立体的なボタンを作る方法！
まとめ

出来上がりはこんな感じ

HTML&CSSで立体的なボタンを作る方法！

■用意する物

・エディタ
＞＞Atom、VScode、Sublime など、、、
・ブラウザ
＞＞Chrome、IE、FireFox など、、、

HTMLで<a></a>タグを使用

新米太郎

CSSへのリンク設定とclass名忘れないように！

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>HTML＆CSSで立体的なボタンを作る</title>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <!-- CSSでスタイルを設定するためclass="btn"忘れずに！-->
    <a href="#ここにリンク先を挿入" class="btn">新規登録</a>
  </body>
</html>

CSSで立体的なボタンのデザイン

.btn{
padding:8px 24px;/* 上下,左右の余白を指定 */
color:white;/* 文字の色 */
display:inline-block;/* 並びはインライン中身はブロック */
opacity:0.8;/* ボタンの透明度(1がデフォルト)　*/
background-color:#239b76;/* ボタンの色(今回は緑にしたよ！) */
border-radius:4px;/* ボタン角の丸み(px値が大きい程丸くなる) */
box-shadow: 0px 7px #1a7940;/* 立体的に見せる(水平方向,垂直方向,色で指定する) */
}

box-shadow によってボタンを立体的に表現することが可能です。

ボタンの押下時に変化をつける

.btn{
padding:8px 24px;/* 上下,左右の余白を指定 */
color:white;/* 文字の色 */
display:inline-block;/* 並びはインライン中身はブロック */
opacity:0.8;/* ボタンの透明度(1がデフォルト)　*/
background-color:#239b76;/* ボタンの色(今回は緑にしたよ！) */
border-radius:4px;/* ボタン角の丸み(px値が大きい程丸くなる) */
box-shadow: 0px 7px #1a7940;/* 立体的に見せる(水平方向,垂直方向,色 で指定する) */
}

/* class名：active(ボタンの押下時) */
.btn:active{
box-shadow:none;/* 影を非表示にする */
position:relative;/* ボタン(要素)の位置を変更するために用いる */
top:7px;/* px値分下にずれる */
}

押下時、box-shadowを非表示にしてボタンを現在地から7px位置を下げることで、押下時の立体感を出すことが可能になります。

※要素の位置を変更する場合は「position: relative;」とセットで使用しますので覚えておきましょう。

カーソルが重なった時に変化させる

.btn{
padding:8px 24px;/* 上下,左右の余白を指定 */
color:white;/* 文字の色 */
display:inline-block;/* 並びはインライン中身はブロック */
opacity:0.8;/* ボタンの透明度(1がデフォルト)　*/
background-color:#239b76;/* ボタンの色(今回は緑にしたよ！) */
border-radius:4px;/* ボタン角の丸み(px値が大きい程丸くなる) */
box-shadow: 0px 7px #1a7940;/* 立体的に見せる(水平方向,垂直方向,色 で指定する) */
}

/* class名：active(ボタンの押下時) */
.btn:active{
box-shadow:none;/* 影を非表示にする */
position:relative;/* ボタン(要素)の位置を変更するために用いる */
top:7px;/* px値分下にずれる */
}

/* class名：hover(カーソルの重なり時) */
.btn:hover{
opacity:1;/* 透明度 */
}

ボタンにカーソルが重なった時、opacityが0.８→１に変わるため
ボタンの色が変化するようになります。