【HTML】ボタンの色, 影, 枠線, クリック時の枠線を全て消そう！【CSS】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

１分で理解できるHTML/CSS講座シリーズです。

今回はボタンの色・影・枠線・クリック時の枠線を消す方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

1分でボタンの全ての装飾を消すことができる

１分で理解できるHTML/CSS講座シリーズはじめっ！

ボタンの装飾を全て消そう！
1. 実装確認
2. コピペ用
まとめ

ボタンの装飾を全て消そう！

実装確認

See the Pen ボタンの装飾をすべて消す by samehack (@samehack) on CodePen.

buttonタグにはデフォルトでCSS設定が入っているので
今回はまとめて解除したよ！

コピペ用

button {
  /* 背景色を無色に */
  background: transparent;
  /* 枠線を消す */
  border: none;
  /* クリックした際に枠線をnone消す */
  outline: none;
  /* 影を消す */
  box-shadow: none;
}

環境によっては上書き不要なものもあるよ！

まとめ

CSSを上書きすることで、デフォルトの装飾を消せる

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram