兩個不同的漸變在一個HTML按鈕

Question

我想要做的是我想保持頂部50％的HTML按鈕有梯度說從#FFF到#BBB和底部50％應保持一種顏色可以說＃111。我無法想出辦法做到這一點，任何幫助將主要讚賞。

我的按鈕的代碼是：

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

Answer 1

的CSS：

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

這應該做在最新的瀏覽器的伎倆。這取決於你使它跨瀏覽器兼容。 （我個人很喜歡http://www.colorzilla.com/gradient-editor/的Photoshop-esque接口）

Answer 2

這裏是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); 
} 

希望幫助（這些都是水鴨排序的，所以你必須要改變的那部分）