HTMLとCSSのみで影付きで動くボタンを実装します。
こんなの
まずは下準備
<div class="container">
<span class="btn message">さっそく購読する</span>
</div>
ここではセレクタとしてクラスにbtn messageを設定します。
次いでCSS
.btn{
padding:8px 24px;
color:white;
display:inline-block;
opacity:0.8;
border-radius:4px;
cursor: pointer;
background-color:#5dca88;
}
この時点で角丸のかわいらしいボタンが出来ますね。
影をつけます。
.btn{
padding:8px 24px;
color:white;
display:inline-block;
opacity:0.8;
border-radius:4px;
cursor: pointer;
background-color:#5dca88;
box-shadow: 5px 7px 5px 1px rgba(68, 73, 70, 0.3); /*影を追加*/
}
するとこんな感じになります。
box-shadowはプロパティ値が多いので説明します。
左から順番に要素から相対的な X および Y のオフセット、ぼかしと拡散の半径、色を指定しています。
つまり、一つ目の値である5pxのところを10pxにすれば右方向に影が生成され、2つ目の7pxを変えれば下方向に生成されます。
あとはぼかし具合と影の半径（大きさ）を決めて、最後にrgbaで色味と透明度の設定をしています。
詳しくはMDNでも読みやがってください。
お次はマウスオーバーした際に色が変わるようにします。
その方がかわいいから。
以下をCSSに記述します。
.btn:hover{
opacity:1;
}
こんな感じになります。（画像が雑ですみません）
マウスオーバーした際にopacity(透明度）が0.8 から1.0変更されることによって選んだ感を出してるわけです。
最後に押下時の動きをつけます。
.message:active{
box-shadow:none;
position:relative;
top:7px;
}
出来上がり(画像雑ですみません）
セレクタ:activeによって押下時の動きをつけているのですが、
box-shadow:none;にすることで影を消し、
position:relative; で要素の基準位置を設定し、
更にtop:7pxで、ボタンの左上（基準位置）から7px下にボタンを表示する、となっているわけですね。
すると結果的ボタンに動作を与えることが出来るんですね。
また一つ賢くなってしまったね。
↧