Question

我想要做的是我希望保持html按钮的前50％具有从#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);
}

希望有所帮助。（这些都是深青色，所以你必须改变那部分）

一个html按钮中的两个不同的渐变

2 个答案: