立体的なボタンを作るための方法

初めに

• Progateを学習中に躓いたところを中心に復習がてらにアウトプットしていきます！

目標物

完成前ビュー

完成ビュー

結論

• border-boxを使いこなすことでボタンの下に影を作り出す。

完成前のコード

HTML

 <span class="btn message">さっそく開発する</span>

CSS

.message {
  padding: 15px 40px;
  background-color: #5dca88;

}

手順

• .messageセレクタにborder-boxプロパティを記載し値を入れていく

• 今回は水平方向０、垂直方向7px、色#1a7940を入れる

CSS

.message {
  padding: 15px 40px;
  background-color: #5dca88;
  box-shadow: 0 7px #1a7940;
}

完成ビュー

カーソルをポインターに変える

• さっそく開発するのボタンに近づけるとマウスが手の形のポインターに変わるように設定を行う *cursorプロパティはカーソルをいろんな形に変えることができる。

　　* .messageセレクタにcursor:pointer;を記述していく

CSS

.message {
  padding: 15px 40px;
  background-color: #5dca88;
  box-shadow: 0 7px #1a7940;
  cursor:pointer;
}

完成ビュー

結語

• 立体的なボタンはbox-shadowとcursorを上手く使いこなすことで作ることができる。