【CSS】box-shadowでボタンに影をつけてみよう！

シュウ

今回は【CSS】box-shadowでボタンに影をつけてみよう！
についての解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
box-shadowの使い方について学びたい方へ
今回はボタンにbox-shadow(影)をつけてみよう！

ボタンに対して影をつけることで、より立体的にボタンをレイアウトできます。
前回の記事を読んでbox-shadowについての理解度を上げておきましょう！

box-shadowに関する記事

box-shadowで指定方法を学び要素に影をつけてみよう！

基本的なbox-shadowの指定方法についての記事になります。

[記事の内容]

ボタンに影をつけてみよう

実際にボタンに影をつけた例をご紹介していきます。
コピペで使うことができます。またアレンジもやってみてください。

ぼかさないボタン

シンプルなボタンになります。
box-shadowでの水平方向、垂直方向、色の3種のみでの指定になります。

ぼかさないボタン

ボタン

<a href="#" class="btn01">ボタン</a>

.btn01 {
	padding: 20px 100px;
	display: inline-block;
	color: #333;
	text-decoration :none;
	text-align: center;
	background: #ffbf4b;
	transition: .4s;
	
	/*--水平方向 垂直方向 色--*/
	box-shadow: 10px 10px #f9a5a5;
}

.btn01:hover {

	/*--水平方向 垂直方向 色--*/
	box-shadow: 0px 0px #f9a5a5;
}

ボタンにぼかしをいれる

rgbaを指定し「ぼかし」のようなボタンにします。
box-shadowでの水平方向、垂直方向、影のぼかし、色(rgba)の4種のみでの指定になります。

ぼかしのボタン

ボタン

<a href="#" class="btn01">ボタン</a>

.btn01 {
	padding: 20px 100px;
	display: inline-block;
	color: #333;
	text-decoration :none;
	text-align: center;
	background: #ffbf4b;
	transition: .4s;
	
	/*--水平方向 垂直方向 影のぼかし 色--*/
	box-shadow: 10px 10px 10px rgba(0,0,0,0.3);  
	
	/*--角丸指定--*/
	border-radius: 100vh;
}

.btn01:hover {

	/*--水平方向 垂直方向 色--*/
	box-shadow: 0 0 10px rgba(0,0,0,0);
}

ボタンに影を複数指定する

今回はマウスオーバーした際に影を指定しています。
また、translateY(-4px)指定により、垂直方向に動きます。
box-shadowでの複数の指定をする際には,「カンマ」で区切るようにします。

ボタンに影を複数指定

ボタン

<a href="#" class="btn01">ボタン</a>

.btn01 {
	padding: 20px 100px;
	display: inline-block;
	color: #333;
	text-decoration :none;
	text-align: center;
	background: #ffbf4b;
	transition: .4s;
	
	/*--影の複数指定--*/
  　box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
   
  　-webkit-tap-highlight-color: transparent;
  　transition: .2s ease-out;
}

.btn01:hover {

	transform: translateY(-4px);

	/*--影の複数指定--*/
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 7px -2px rgba(0, 0, 0, 0.2);}

}

正円ボタンに影を指定する

今回はborder-radius: 50%を指定し、正円ボタンに影を指定しています。
「rgbaを0.3」からマウスオーバーした際に「rgbaを0.6」に指定し、影の色を濃ゆくしておリます。

正円ボタン

ボタン

<a href="#" class="btn01">ボタン</a>

.btn01 {
 	width: 140px;
 	height: 140px;
	display: inline-block;
 	border-radius: 50%;
 	line-height: 140px;
 	background: #ffbf4b;
 	color: #333;
	text-decoration :none;
	text-align: center;
	
	/*--影の複数指定--*/
 	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
	transition: background-color 1s;
}

.btn01:hover {

	/*--影の複数指定--*/
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
	background-color: #ffaa22; 
	transition: background-color 1s;

}

立体的な正円ボタンに影を指定する

今回もborder-radius: 50%を指定し、立体的な正円ボタンに影を指定しています。
先ほどの、translateY(4px)を指定し、ボタンを押し込んだかんじにします。

立体的な正円ボタン

ボタン

<a href="#" class="btn01">ボタン</a>

.btn01 {
 	width: 140px;
 	height: 140px;
	display: inline-block;
 	border-radius: 50%;
 	line-height: 140px;
 	background: #ffbf4b;
 	color: #333;
	text-decoration :none;
	text-align: center;
	
	/*--影の複数指定--*/
 	box-shadow: 0 5px 0 #ffaa22;
	transition: .4s;
}

.btn01:hover {

	/*--影の複数指定--*/
	transform: translateY(4px);
	box-shadow: 0 0 0 #ffaa22;

}