Question

我想知道是否有人知道为什么“提交”按钮的“默认”样式看起来相当不错（角稍微圆，从上到下有一些渐变等）但是当我添加背景颜色时它会改变为一个1990年代的方形按钮，带有2px边框......看起来很糟糕。

我可以以某种方式保留大部分默认样式但更改背景颜色吗？谢谢！

Answer 1

如果网站没有设置样式，浏览器会提供大量默认样式以使事物看起来很漂亮。例如，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是一个非标准属性，它定义了与操作系统的默认按钮样式一致的样式。这就是为什么它在不同的操作系统上也会有所不同。

Answer 2

＆＃34;问题＆＃34;是默认背景是一个非常复杂的渐变。

我建议您使用jQuery UI或Bootstrap之类的框架来设计按钮。这比使用按钮搜索自己的背景渐变要容易得多。

Answer 3

您的（现代）浏览器（或css framework like bootstrap）包含提交按钮的默认样式（因此它看起来"pretty good (corners slightly rounded, some gradient from top to bottom, etc.)"而不是1990的按钮。

当您在css中覆盖这些渐变时（通过更改background-color），您将覆盖浏览器使用的那些编程默认值。您可以制作自己的漂亮渐变，而不仅仅是更改背景颜色。和，正如@ŠimeVidas在评论中指出的那样，更改背景颜色也会删除默认的border-style。

我建议using a gradient generator而不是简单地更改background-color。

Answer 4

你只需要一点点CSS就可以制作漂亮的按钮。看看这些参考文献：

http://webdesignerwall.com/tutorials/css3-gradient-buttons

http://css3button.net/

“提交”按钮的样式

4 个答案: