buttonを使うとき、勝手に表示される影・枠線・背景色といった装飾をリセットする方法。
多少なりともデザインを整えるサイトならbuttonを初期状態のまま使うことなんてないと思うので、CSSのテンプレートのリセット部分に入れておいても良いかもしれない。
ソースコード
HTML
CSS
button {
color: black;
padding: 20px;
margin-top: 20px;
margin-left: 20px;
}
.has-shadow { /* 記述なし */
}
.clear-decoration {
border: none; /* 枠線を消す */
outline: none; /* クリックしたときに表示される枠線を消す */
background: transparent; /* 背景の灰色を消す */
}
.decorated {
cursor: pointer; /* マウスカーソルを乗せると指になる */
outline: none;
border: 1px solid #f00;
background-color: rgb(255, 0, 0, 0.2);
}
.image {
cursor: pointer;
outline: none;
border: 1px solid #000;
background: transparent;
}
.image img {
height: 100px;
width: 100px;
}