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

【问题标题】：Give multiple colors to a button using css使用 css 为按钮赋予多种颜色
【发布时间】：2017-02-27 05:04:16
【问题描述】：

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

Button should look like this

【问题讨论】：

创建自定义按钮
我发现了另一个类似的 stackoverflow 问题，看起来它有很好的响应。 stackoverflow.com/questions/14739162/… 应该是一个很好的起点！
Two-tone background split by diagonal line using css的可能重复

标签： css

【解决方案1】：

您可以使用线性渐变。

JSFiddle

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

&lt;button&gt;&lt;/button&gt;

【讨论】：

【解决方案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>

【讨论】：

【解决方案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

【讨论】：