两个不同的渐变在一个HTML按钮

问题描述：

我想要做的是我想保持顶部50％的HTML按钮有梯度说从#FFF到#BBB和底部50％应保持一种颜色可以说＃111。我无法想出办法做到这一点，任何帮助将主要赞赏。两个不同的渐变在一个HTML按钮

我的按钮的代码是：

<button class="Button1" type="submit">Submit</button>

看看这个：http://*.com/questions/4094444/is -IT-可能对具有-2-不同-背景颜色换一按钮孔-CSS-对接 – Dan 2014-09-05 01:35:57

答

的CSS：

.Button1 { 
    background-image: linear-gradient(to bottom, #fff 0%, #bbb 50%, #111 50%); 
}

这应该做在最新的浏览器的伎俩。这取决于你使它跨浏览器兼容。（我个人很喜欢http://www.colorzilla.com/gradient-editor/的Photoshop-esque接口）

答

这里是Bootstrap的一个示例，它应该可以帮助您使用按钮渐变。这也涵盖了大多数现代浏览器。

.btn-info { 
color: #ffffff; 
text-shadow: 0 -1px 0 rgba(0,0,0,0.25); 
background-color: #49afcd; 
background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4); 
background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4)); 
background-image: -webkit-linear-gradient(top,#5bc0de,#2f96b4); 
background-image: -o-linear-gradient(top,#5bc0de,#2f96b4); 
background-image: linear-gradient(to bottom,#5bc0de,#2f96b4); 
background-repeat: repeat-x; 
border-color: #2f96b4 #2f96b4 #1f6377; 
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0); 
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); 
}

希望帮助（这些都是水鸭排序的，所以你必须要改变的那部分）

两个不同的渐变在一个HTML按钮

相关推荐