みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
1分で理解できるHTML/CSS講座シリーズです。
今回はボタンの色・影・枠線・クリック時の枠線を消す方法について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- 1分でボタンの全ての装飾を消すことができる
1分で理解できるHTML/CSS講座シリーズはじめっ!
ボタンの装飾を全て消そう!
![](https://samehack.com/wp-content/uploads/2022/11/sponge-g0b2b02936_1920-1-1024x592.jpg)
実装確認
See the Pen ボタンの装飾をすべて消す by samehack (@samehack) on CodePen.
buttonタグにはデフォルトでCSS設定が入っているので
今回はまとめて解除したよ!
今回はまとめて解除したよ!
コピペ用
button {
/* 背景色を無色に */
background: transparent;
/* 枠線を消す */
border: none;
/* クリックした際に枠線をnone消す */
outline: none;
/* 影を消す */
box-shadow: none;
}
環境によっては上書き不要なものもあるよ!
まとめ
![](https://samehack.com/wp-content/uploads/2021/11/dfe65cc8c5d3185e7b92ade5af4cc6bb-4-1024x264.jpg)
- CSSを上書きすることで、デフォルトの装飾を消せる
![](https://samehack.com/wp-content/uploads/2021/09/00c3d3cf1d32995d7b5414ac551d13f3.png)
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈