今回は【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の詳しい記事を載せておきますので
一度、ご参考程度に読んでみてはいかがでしょうか。
関連記事
「border-radius」についての詳しい指定方法など
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事