ブラウザ標準をリセットしたボタン
ブラウザでデフォルトで設定される背景色やボーダーを打ち消したボタン。ボタンを自分色に染めたい人は、このボタンを基準にデザインを上乗せしていくといいでしょう。
ボタン
Source Code
右上の「コピー」からご利用ください。
コピー
<div class="my-parts">ボタン</div>コピー
.my-parts {
display: inline-block;
padding: .6em 2em;
margin: 0 0 1em;
background-image: none;
background-color: #4CAF50;
color: #fff;
text-decoration: none;
border: none;
border-radius: 0;
font-size: 16px;
cursor: pointer;
-webkit-appearance: none;
box-shadow: .0625em .0625em .1875em 0 rgba(0,0,0,.2);
}
.my-parts:hover,
.my-parts:focus {
outline: none;
}
.my-parts::-moz-foucus-inner {
padding: 0;
border: none;
}
