この記事では、カーソルを合わせるとブワッ！と沈むカッコイイ「ボタン」を作るCSSをご紹介していこうと思います。
自分でホームページを作っているとちょっとした部分にもオシャレなデザイン、かっこいいデザインを意識しちゃいますよね！？
特にボタン部分はユーザーがカーソルを合わせるなど、何らかのアクションをする部分なので特にこだわる部分かと思います。（実際にクリック率にかなりの差があるというデータがあるそうですよ！）
なので、ここでは「なんかイケてるデザインのボタンを作りたいな～」と思った時のご参考になれば嬉しいです。
※載せているCSSをコピペするだけでOKですが、これを元にご自身でカスタマイズしてサイトに合ったボタンを作成することも簡単です。
オシャレでカッコイイぼたんを作ろう！
下記が完成品のボタンとなります。
上記の「サンプルぼたん」にカーソルを合わせてみてください。
カーソルをボタンの上に合わせると「ブワッ！」と沈んで、カーソルを離すと「ブワッ！」と浮かび上がるはずです。
これを作りながら、それぞれ必要に応じてコードの意味も紹介していきます。
ボタンを実際に作ってみよう
<!-- HTMLコード -->
<div class="btn">
<a href="">サンプルぼたん</a>
</div>
上記はHTMLに記述するコードです。
class属性は任意のものを指定して頂いて大丈夫ですが、ここでは「btn」に設定しています。
「a herf=”ここに任意のリンク先URL”」
「サンプルぼたん」＝ここも任意の表示名に変えてください。
/* CSSコード */
.btn a {
width: 300px;
background-color: #000;
border-radius: 4px;
color: #fff;
display: block;
font-size: 14px;
text-align: center;
text-decoration: none;
margin: 10px auto;
padding: 15px 0;
box-shadow: 0 5px 0 rgba(0,0,0,0.3);
}
上記がCSSの記述になります。
要点だけザックリと解説していきますね！
「width」
ボタンの横幅を指定できます。
ここでは300pxになっていますが、必要に応じて小さくしたり大きくしたりしてみてください。
高さは「padding」の15pxの部分を変更することで高くしたり低くしたり出来ます。
「background-color」
ボタンの背景色です。
ここでは黒（＃000）に指定していますが、サイトのカラーに応じて変えるのも良いですね。
ちなみに、背景色を変えるとカラーによっては文字色が見にくくなることがあるので、その場合は「color（文字色）」を見やすい色に変えてあげると良いでしょう。
「border-radius」
4つ角を丸くする記述です。
ここでは4pxに設定していますが、数値を変えるとどう変化するのか確認して、気に入った形に設定するのがオススメです。
「box-shadow」
ボタンの下にある影を作り出す記述です。
「0 5px 0 rgba(0,0,0,.3)」という数値になっていますが、最初の「0px 5px 0px」（0の場合はpxを省略できる）は、「X軸・Y軸・ぼかし」を指定できるようになっています。
これは、実際に色んな数値を入れて変化を見た方が早いので、色々と試してみてくださいね！
そして、後半にある「rgba(0,0,0,0.3)」ですが、rgbというのはred（赤）、green（緑）、blue（青）の光の三原色でカラーを指定する方法です。
これに、alpha（透過度）を加えたのが「rgba」で、色と透過度を同時に指定できる記述となります。
もちろん、色だけをドンッと指定するだけでも大丈夫ですが、透明度も加えたい場合に便利な記述です。（aの数値も変えて変化を試してみてくださいね！）
ちなみに、rgbaを確認するには「HSLカラーピッカー」が便利です。
ここまでのコードを書いてみると、、、
こんな感じで見た目は完成しましたね！
ただ、カーソルを合わせてもらえれば分かりますが、実はこれだけではブワッ！とした浮き沈みがまだ無い状態です。
では次に、「ブワッ！」とするCSSの記述を付け足していきます。
/* CSSコード */
.btn a {
width: 300px;
background-color: #000;
border-radius: 4px;
color: #fff;
display: block;
font-size: 14px;
text-align: center;
text-decoration: none;
margin: 10px auto;
padding: 15px 0;
box-shadow: 0 5px 0 rgba(0,0,0,0.3);
}
/* 追加コード */
.btn a:hover {
box-shadow: none;
transform: translate3d(0, 5px, 0);
transition-duration: 0.3s;
opacity: 0.8;
}
btn.aに疑似クラス「hover」を設定します。
これは、カーソルを当てた時にどう変化するのかを設定できます。
最初の「box-shadow: none;」は、カーソルを当てると「ボックスの影を消してね！」という命令を与えています。
それでいて、「transform: translate3d(0, 5px, 0);」で影の大きさと同じ5px下げるという設定をしています。
※（X軸・Y軸・Z軸）を指定する。
今回は縦のY軸を5px下げておりますが、ここの数値も変更するとどうなるかを見てみるのも面白いですよ！
そして、「transition-duration: 0.3s;」がブワッ！を表現する重要な部分！
これは、ゆっくり動作させる指定となり「0.9」に変えるとメチャクチャ遅く沈むようになります。
ここも数値を変えて試してみて下さいね。
「opacity」は、透明度を変える指定でカーソルを当てると少し色が薄くなるのが分かるかと思います。
「0.1」にすると、ほぼ消えます。
そんな感じで、コードをすべて書くと最初に紹介した「ブワッ！」と浮き沈みするボタンが出来上がるはずです。
コードの記述方法に絶対は無く、あくまでも1例なのでカッコイイボタン作りのご参考にしていただければ幸いです。
カスタマイズ参考例を少し…
/* CSSコード */
.btn a {
width: 250px;
background-color: skyblue;
border-radius: 4px;
color: #fff;
display: block;
font-size: 20px;
font-weight: bold;
text-align: center;
text-decoration: none;
margin: 10px auto;
padding: 30px 0;
box-shadow: 0 5px 0 rgba(0,0,0,0.2);
text-shadow: 1px 1px 1px #333;
}
.btn a:hover {
box-shadow: none;
transform: translate3d(0, 5px, 0);
transition-duration: 0.6s;
opacity: 0.8;
text-shadow: none;
}
【ポイント】
「text-shadow」で文字に影を付けるとクッキリ見えて見栄えが良いですよ～。
※（X軸・Y軸・ぼかし・カラー）を指定できるので色々いじって試してみて下さいね！
/* CSSコード */
.btn a {
width: 320px;
border-radius: 4px;
color: #fff;
display: block;
font-size: 20px;
font-weight: bold;
text-align: center;
text-decoration: none;
margin: 10px auto;
padding: 30px 0;
box-shadow: 0 5px 0 rgba(0,0,0,0.2);
text-shadow: 1px 1px 1px #333;
background: linear-gradient(to right, red, orange, yellow, green, aqua, blue, purple);
}
.btn a:hover {
box-shadow: none;
transform: translate3d(0, 5px, 0);
transition-duration: 0.6s;
opacity: 0.8;
text-shadow: none;
}
背景色を虹色にしてみました。
「background」は、工夫次第で色んな模様が作れたりもするので、驚くようなアートを色で表現してみるのも面白いかもしれませんね！
是非、いろんなボタンを作ってみて下さいね。
コメントを残す