CSS 生成 Windows 样式按钮 [关闭]答案

【问题标题】：CSS to produce Windows Style button [closed]CSS 生成 Windows 样式按钮 [关闭]
【发布时间】：2015-11-13 17:56:47
【问题描述】：

我在尝试创建和模仿 Windows 主题样式按钮时修补了一些网站。 CSS 样式模式将基本上反映下图中的按钮？

图中有非活动状态、悬停状态和默认状态按钮

【问题讨论】：

标签： css

【解决方案1】：

您需要以下组合：

边框样式

边框宽度

边框颜色

边框半径

背景：线性渐变

在此处阅读文档：http://www.w3schools.com/css/default.asp 对于 CSS 和 CSS3

【讨论】：

【解决方案2】：

对于渐变，请使用此在线工具为您生成 CSS：Colorzilla

然后你需要应用 CSS border 属性。

然后你可以使用 CSS :hover 选择器来改变它在按钮元素悬停时的外观。

我希望这会给你一个开始。所以先玩这些东西，让我们知道结果。然后，我们将为您提供更多详细信息。

【讨论】：

【解决方案3】：

从你的默认状态开始：

button {
  border: 1px solid black;
}

悬停状态：

button:hover {
  border: 1px solid blue;
}

禁用状态：

button[disabled=disabled] {
  border: 1px solid grey;
}

这些样式不完整，但选择器很重要。

圆角效果是通过在button css 中添加border-radius: 3px; 生成的。

要获得渐变，您需要使用background 和linear-gradient；我推荐一个像 www.cssmatic.com/gradient-generator 这样的工具来为你生成样式。

【讨论】：