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

我想为我的asp.net 2.0 webform使用一些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>

有什么想法吗？

来源

2010-07-08 melaos

不能做到吧？我想我已经检查过，发现了一些相关的问题。但到目前为止还没有解决方案:( – melaos 2010-07-09 00:47:01

不能做到：see this article

的Mozilla目前只支持CSS渐变作为背景图片属性的值，以及内速记背景。 您可以指定渐变值而不是图片网址。

我敢肯定的WebKit（Safari /铬）可能是相同的方式。 IE不支持渐变。

我的建议是将您的提交按钮包装在div元素中。将渐变应用于提交按钮，并将背景图像应用于div，并在需要的位置添加一点填充以将其正确分隔。或者，为您的提交按钮使用<label>元素并将背景图像应用于标签。

来源

2010-07-09 02:05:29 desertwebdesigns

其实我有这些按钮，它不是一个设计问题比编程/编码问题更多。当提交按钮的行为像编程一样，因为大多数jquery插件本身支持此行为 – melaos 2010-07-09 02:37:41

我不确定我是否理解你的意思，你仍然可以有一个提交按钮，不管你想要什么样的样式，它仍然会按照它应该的那样工作。div包装器或标签元素不会影响它的功能。如果我误解你的意思，请告诉我。 – desertwebdesigns 2010-07-09 03:45:54

我的意思是，当它不是一个真正的提交按钮时，我无法获得适当的悬停和点击行为，这将触发jquery客户端验证正确。通常必须自己调用验证或放置一个.click（$（“＃formID”）。submit（）解决方法。 – melaos 2010-07-14 04:50:21

谷歌的Gmail/Docs/etc UI按钮使用一些CSS欺骗来完成此操作。你可以看到别人的实现在这里：

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

基本上按钮是实际的href锚<a>与适用于他们的梯度。然后是使用::before伪选择器将背景设置为图像的独立样式。重新实现有点棘手，但它显然是可能的。

来源

2011-12-12 19:08:56

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

回答

相关问题