使用css为按钮赋予多种颜色

Question

我想像这样给按钮着色。有什么办法可以用css做到这一点吗？

Button should look like this

Answer 1

您可以使用线性渐变。

JSFiddle

button {
  height: 50px;
  width: 100px;
  background: linear-gradient(-60deg, red 50%, yellow 50%);
}

<button></button>

Answer 2

使用类似的东西

.x{
height: 50px;
background: #ff3232;
background: -moz-linear-gradient(-45deg, #ff3232 0%, #ff3030 50%, #282fff 51%, #005dff 100%);
background: -webkit-linear-gradient(-45deg, #ff3232 0%,#ff3030 50%,#282fff 51%,#005dff 100%);
background: linear-gradient(135deg, #ff3232 0%,#ff3030 50%,#282fff 51%,#005dff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#005dff',GradientType=1 );
}

<div class="x">
</div>

Answer 3

HTML：

<button id="main"></button>

CSS：

#main {
    width: 200px;
    height: 50px;
    border: none;
    background: linear-gradient(120deg, rgb(255, 0, 144), rgb(255, 0, 144) 55%, rgb(0, 222, 255), rgb(0, 222, 255) 45%);
}

Codepen