「送信」ボタンの「デフォルト」スタイルがかなり見栄えがする理由(角がわずかに丸みを帯びている、上から下へのグラデーションなど)を誰かが知っているかどうか疑問に思いますが、背景色を追加すると、1990年代に変わります。 2pxの境界線のある正方形のボタン...ただひどいように見えます。
どういうわけか、デフォルトのスタイルのほとんどを維持しながら、背景色を変更できますか?ありがとうございました!
ブラウザには、Webサイトでスタイルが設定されていない場合に見栄えを良くするために、デフォルトのスタイルの大きなセットが付属しています。たとえば、Firefoxには、デフォルトの送信ボタンに対して次のスタイルが定義されています。
input[type="submit"] {
-moz-appearance: button;
-moz-binding: none;
-moz-box-sizing: border-box;
-moz-user-select: none;
background-color: buttonface;
border: 2px outset buttonface;
color: buttontext;
cursor: default;
font: -moz-button;
line-height: normal;
padding: 0 6px;
text-align: center;
text-shadow: none;
white-space: pre;
}
-moz-appearance
は非標準のプロパティであり、オペレーティングシステムのデフォルトのボタンスタイルと一致するようにスタイルを定義します。そのため、オペレーティングシステムによっても外観が異なります。
(最新の)ブラウザ(またはbootstrapのようなcssフレームワーク)には、送信ボタンのデフォルトのスタイルが含まれています(したがって"pretty good (corners slightly rounded, some gradient from top to bottom, etc.)"
、1990年代のボタンのようには見えません)。
cssでこれらのグラデーションを(を変更してbackground-color
)オーバーライドすると、ブラウザーが使用していたプログラムされたデフォルトがオーバーライドされます。背景色を変更するだけでなく、独自のグラデーションを作成できます。また、@ŠimeVidasがコメントで指摘しているように、背景色を変更するとデフォルトも削除されますborder-style
。
単に変更するのではなく、グラデーションジェネレータを使用することをお勧めしbackground-color
ます。
ほんの少しのCSSで美しいボタンを作ることができます。これらの参考資料を確認してください。