CODEWITHSUNDEEP
css
Nidhin Radh
Nidhin Radh

Reputation: 131

Give multiple colors to a button using css

I Want to color a button just like this. Is there any way i can do this by using css?

Button should look like this

Upvotes: 2

Views: 14806

Answers (3)

Rob Monhemius
Rob Monhemius

Reputation: 5144

You can use a linear gradient.

JSFiddle

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

Upvotes: 10

Matthew W.
Matthew W.

Reputation: 409

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

Upvotes: 0

xxfast
xxfast

Reputation: 737

Using something like this 

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

Upvotes: 2

Related Questions