[HTML・CSS]ボタン(要素)に影を付ける方法
2020/12/17
今回は、サイトを作成する際にボタン等の要素に影を付ける方法について紹介したいと思います。
結論から言うとcssで「box-shadow」を設定します。
box-shadow: 4px 4px 4px 4px rgba(0,0,0,0.4);
こんな感じです。
まだ、話が抽象的過ぎると思うので実際のコードを紹介したいと思います。
<div class="sample">ボタンサンプル</div>
<style>
.sample{
color:#EEEEEE;
background-color: #333333;
padding:20px;
width:180px;
text-align: center;
border-radius: 28px;
margin:20px;
box-shadow: 4px 4px 4px 4px rgba(0,0,0,0.4);
}
</style>このように記載をしてあげると下の図のようなボタンを作成する事が出来ます。
おすすめ記事
2020/10/31
[HTML・CSS]fontawesomeを使ってアイコンを表示する方法
今回は、htmlを用いてサイトを構築する際に簡単にアイコンを表示させる方法について今回は、紹介した...
Read more...2020/07/27
[HTML・CSS]背景色でグラデーションにする方法
今回は、HTML・CSSにおいて背景色をグラデーションにする方法について紹介したいと思います。 ...
Read more...2020/11/03
[HTML・CSS]箇条書き(ul)の左側にある点を消す方法
今回は、htmlで箇条書きをしている際に用いるulの左にある点の消し方を紹介したいと思います。 ...
Read more...2020/06/13
[HTML・CSS]サイトをスマホ・タブレット・PCごとに設定する方法
今回は、画面のサイズ(スマホ・タブレット・PC)ごとにCSSを設定する方法について紹介したいと思い...
Read more...2020/12/19
[HTML・CSS]cssでアニメーションの速度を設定する方法
今回は、cssでアニメーションの速度を設定する方法について紹介したいと思います。 アニメーシ...
Read more...