SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.06.12
  • CATEGORY
TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • 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;

}

まとめ

今回はこれで以上になります。
CSSでのボタンの種類はまだ多くありますが、今回はボタンと影の相性についての記事になりました。

今回、box-shadow以外でのborder-radius、rgbaの詳しい記事を載せておきますので
一度、ご参考程度に読んでみてはいかがでしょうか。

関連記事

「rgba」についての詳しい指定方法など

「border-radius」についての詳しい指定方法など

スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top