2

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

Nidhin Radh
  • 131
  • 2
  • 2
  • 11
  • create a custom button – Mandarr Sant Feb 27 '17 at 05:06
  • Possible duplicate of [Two-tone background split by diagonal line using css](http://stackoverflow.com/questions/14739162/two-tone-background-split-by-diagonal-line-using-css) –  Feb 27 '17 at 05:25
  • I found this other stackoverflow question that is similar that looks like it has a good response. http://stackoverflow.com/questions/14739162/two-tone-background-split-by-diagonal-line-using-css Should be a good starting point! – Ryan Javens Feb 27 '17 at 05:17

3 Answers3

9

You can use a linear gradient.

JSFiddle

button {
  height: 50px;
  width: 100px;
  background: linear-gradient(-60deg, red 50%, yellow 50%);
}
<button></button>
Rob Monhemius
  • 4,822
  • 2
  • 17
  • 49
2

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>
xxfast
  • 697
  • 5
  • 14
0

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

Matthew W.
  • 413
  • 1
  • 9
  • 17