如何创建具有渐变背景和背景图像的按钮？答案

【问题标题】：How to create a button with gradient background and background image?如何创建具有渐变背景和背景图像的按钮？
【发布时间】：2011-03-13 06:36:18
【问题描述】：

我正在尝试为我的 asp.net 2.0 网络表单使用一些 jquery client side validation。而且看起来普通的输入提交按钮很容易触发点击验证。

但我目前正在为此页面使用三个 div 组成的图像按钮，因此它不会自动触发验证。

我在看css3，发现它现在支持渐变，一切都很好，除了我需要在按钮的右侧显示一个箭头图像。

我已经测试了正常的背景图像和背景颜色来设置一个按钮，它可以工作。但是对于渐变背景和背景图像，我似乎无法获得相同的效果。

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid Sans">
<style>
.button{
    -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.25, rgb(88,73,229)),
    color-stop(0.63, rgb(115,103,255)),
    color-stop(0.82, rgb(150,134,255))
);
-moz-linear-gradient(
    center bottom,
    rgb(88,73,229) 25%,
    rgb(115,103,255) 63%,
    rgb(150,134,255) 82%
);

    color:#FCD3A5;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 10px;
    font: 12px;
    width:140px;
    line-height: 28px;
    height: 28px;
    font-weight: bold;
    font-family:"Droid Sans",serif;
}

.orange{
    background:-moz-linear-gradient(center top , #FF9300, #FF6800) repeat scroll 0 0 transparent;
    border:1px solid #CFCFCF;
    color:#FFFFFF;
    font: 12px;
    width:140px;
    line-height: 28px;
    height: 28px;
    font-family:"Droid Sans",serif;
    background-image:url(arrow_right.png);
    background-repeat: no-repeat; 
    background-position:right;

}

.button2{
    background-color:#2daebf;
    background-image:url(arrow_right.png);
    font: 12px;
    width:140px;
    line-height: 28px;
    height: 28px;
    font-weight: bold;
    color: white;
    font-family:"Droid Sans",serif;
    background-repeat: no-repeat; 
    background-position:120px;
    border: 0px;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 10px; 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
.button3{
    background: green; /* fallback for older/unsupporting browsers */  
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, rgb(88,73,229)),
        color-stop(0.63, rgb(115,103,255)),
        color-stop(0.82, rgb(150,134,255))
    );
    background:-moz-linear-gradient(
        center bottom,
        rgb(88,73,229) 25%,
        rgb(115,103,255) 63%,
        rgb(150,134,255) 82%
    );
    border-top: 1px solid white;  
    background-image:url(arrow_right.png);
    background-repeat: no-repeat; 
    background-position:120px;

}

</style>
</head>
<input class="button3" type="submit" value="SUBMIT"/ >
</html>

有什么想法吗？

【问题讨论】：

做不到吧？我想我已经在 SO 中进行了检查，发现了一些相关的问题。但到目前为止还没有解决方案:(

标签： button css background-image gradient

【解决方案1】：

Google 的 Gmail/Docs/etc UI 按钮使用一些 CSS 技巧来实现这一点。你可以在这里看到别人的实现：

http://todc.github.com/css3-google-buttons/#button

基本上，按钮是实际的 href 锚点 <a>，并应用了渐变。然后有一个单独的样式，使用::before psuedo-selector 将背景设置为图像。重新实现有点棘手，但显然是可能的。

【讨论】：

【解决方案2】：

做不到：see this article

Mozilla 目前仅支持 CSS 渐变作为 background-image 属性的值，以及在速记背景中。 您指定渐变值而不是图像 URL。

我确信 webkit (safari/chrome) 可能是相同的方式。 IE 不支持渐变。

我的建议是将提交按钮包装在 div 元素中。将渐变应用到提交按钮，将背景图像应用到 div，并在需要的地方添加一点填充以适当地间隔。或者，为您的提交按钮使用 <label> 元素并将背景图像应用到标签。

【讨论】：

实际上我已经拥有了那些按钮，这与其说是设计问题，不如说是编程/编码问题。当提交按钮以编程方式运行时，我会发现事情变得更容易，因为大多数 jquery 插件本身都支持这种行为。
我不确定我理解你的意思。您仍然可以拥有一个提交按钮，根据需要设置它的样式，并且它仍然可以正常工作。 div 包装器或标签元素不会影响其功能。如果我误解了你在说什么，请告诉我。
我的意思是当它不是一个真正的提交按钮时，我无法获得正确的悬停和点击行为，这将正确触发 jquery 客户端验证。我通常必须自己调用验证或放置一个 .click( $("#formID").submit() 解决方法。
请查看“查看本文”链接。 stackoverflow.com/questions/3100028/…。我认为您指向了错误的网址。