HTML と CSS で動くボタンを作ってそれっぽく見せる

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下にボタンを表示する、となっているわけですね。

すると結果的ボタンに動作を与えることが出来るんですね。

また一つ賢くなってしまったね。