ボタンを実装する方法
今回は、下のようなボタンを作成していきます。
See the Pen ボタン実装 by わい (@y_programing) on CodePen.
HTMLはこちら。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="button">
<a href="#">今すぐ購入する！</a>
</div>
</body>
</html>CSSはこちら。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.button {
border: 1px solid red;
background: red;
border-radius: 5px;
width: 150px;
font-weight: bold;
margin: 10px;
padding: 10px;
}
a {
text-decoration: none;
color: #fff;
}まず、「ボタンを作成する場合はbuttonタグを使う」と思っている人も多いかもしれませんが
実務ではbuttonタグはあまり使わず、aタグで作ることが多いです。
ということで、今回もaタグで作成しています。
HTMLはシンプルで、aタグをdivタグで囲っているだけです。
<div class="button">
<a href="#">今すぐ購入する！</a>
</div>aタグはデフォルトで下線がついており、しかも青文字になっているので
text-decoration: none; で下線を消し、color: #fff; で白色にしています。
a {
text-decoration: none;
color: #fff;
}今回は、ボタンの枠は赤にするので
divタグに赤色のborderと背景色を入れています。
.button {
border: 1px solid red;
background: red;
}次に、ボタンの中が窮屈なのでpaddingと
ボタンの周囲に空間を作りたいので、marginを当てます。
.button {
margin: 10px;
padding: 10px;
}さらに、ボタンの幅が広いので調節し、「今すぐ購入する！」の文字を太文字に。
さらに、ボタン枠の四隅を少し丸くしたいので、border-radiusを指定すれば完成です！
.button {
border-radius: 5px;
width: 150px;
font-weight: bold;
}これで、CodePenの結果と同じボタンが作れたのではないでしょうか？
実際に作る場合は、href属性にリンクを指定し、リンク先のページに飛ばすところまでやってみてくださいね。
ホバーしたらゆっくりと下がるアニメーションを実装しよう
ここまでで、ボタン要素の基本的な実装はできたと思います。
ここからは、CSSだけで少し凝った動きをつけていきたいと思います。
今回は、ホバーしたらゆっくりとボタンが押されるアニメーションをCSSだけで作ってみましょう。
See the Pen ボタン実装（ホバーアニメーションで沈む） by わい (@y_programing) on CodePen.
アニメーションを付ける前に、ボタンに影をつけたいと思います。
.buttonの中に以下のCSSを当ててください。
.button {
box-shadow: 0 4px 0 #d01a0a;
}そしたら、ホバーアニメーションを付けていきますが
ホバーしたら実行されるので、CSSセレクタは.button:hoverですね。
ボタンが押されるように見せるためには、ホバーした際に縦方向（Y方向）の位置を下げれば良いです。
transform: translateY(); を利用することで実現できます。
今回は、5pxだけ下にボタンを下げてみましょう。
.button:hover {
transform: translateY(5px);
}ちなみに、予想できる人もいると思いますが
横方向に動かす場合は、transform: translateX(); です。
さらに、ボタンが押されたら影は消したいので
.button:hover {
box-shadow: none;
}も実装。
しかし、これだといきなり下に5px下がってしまうので
滑らかにボタンが押されるように、transitionを0.3秒くらいで追加しましょう。
.button {
transition: .3s;
}この時、transitionはhoverの擬似要素を付けた.button:hoverではなく、.buttonに付けてください。
hoverの擬似要素の方に付けてしまうと、ボタン外からホバーする時（ボタンが押し込まれる時）はtransitionが発生しますが、ボタン内からホバーを外す時（ボタンが戻る時）はtransitionが発生せず、違和感がある感じになってしまいます。
これで、完了です。全体としては
.button:hover {
transform: translateY(5px);
transition: .3s;
box-shadow: none;
}を当ててください。
これで、ボタンにカーソルを当てたらふわっと下がり、実際に押されているようなアニメーションを作ることができました！
ボタンの影を調節する
ボタンに影をつけるには、box-shadowプロパティを利用しますが、この値をいじることによってボタンの影の付け方を調節することができます。
まずbox-shadowプロパティは、主に3つの値で決まっています。
{
box-shadow: 3px 3px 0 rgb(222, 0, 0); /* 左から、右側の影の大きさ、下側の影の大きさ、ぼやけ度合い、色の情報 */
}box-shadowプロパティは、左から「右側の影の大きさ」、「下側の影の大きさ」、「ぼやけ度合い」、「色の情報」を設定することができます。
上のようなコードなら、右と下に3pxの影がつきますが、ぼやけの度合いが0なのでくっきりとした影。色は赤っぽい色になります。
試しに、ゆっくりと押されるアニメーションを実装したボタンの影の形を変えてみましょう。
元の影は
.button {
box-shadow: 0 4px 0 rgb(222, 0, 0);
}なので、下方向にしか表示されておらず、ぼやけ度合いも0です。
この影を、上の値に変えてみたいと思います。
すると、こんな感じに右にも影が表示されましたね。
See the Pen ボタン実装（ホバーアニメーションで沈む + 影変更） by わい (@y_programing) on CodePen.
ただ、押し込みのアニメーションが入っている関係で
右に影が入っていると、少し違和感が出てしまいますね。
こんな感じで、ボタンの影の方向やぼやけ度合いに関しても、box-shadowプロパティで簡単に調節することができます。
最後に
というわけで、今回はHTML、CSSを利用した基本的なボタンの実装と
ホバーした際にふわっと下がるアニメーションの実装を解説してきました！
ボタン要素はWeb制作でも頻出なので、この記事を参考に頑張って実装して見てください！
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ
フォロー数やいいね数が増えるかもしれません！
＼ 最新情報をチェック ／
コメント