使用css給一個按鈕多種顏色

Question

我想像這樣給一個按鈕着色。有什麼辦法可以通過使用CSS來做到這一點？

Button should look like this

Answer 1

使用這樣的事情

.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 2

可以使用線性漸變。

JSFiddle

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

<button></button>

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