Having a background color set up on a button using linear gradient

I have a requirement to have a button which on hover should display two colors on it. I was able to achieve mix up the colors to a certain level but not able to produce the exact one.Below is my code,

.triangle:hover{
background: -webkit-linear-gradient(-45deg, red 50%,yellow 20%);
}

<button class='triangle'>
  Linear Check 
</button>

Using the above I was able to produce a image like this one on below

But my actual requirement is to have a gradient background in the button like the below one.
[![enter image description here][2]][2]

Please let me know if this is possible and can be achieved using linear gradient .
Thanks in advance
[2]: https://i.stack.imgur.com/u2ZZg.png

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can do it with 2 conic gradients.

.triangle{
  padding:20px;
  border:none;
  --g:red 135deg,yellow 0; /* the coloration */
  --p:30%;/* the position */
  background:
    conic-gradient(from -180deg at 50% var(--p)             ,var(--g)) top,
    conic-gradient(from -135deg at 50% calc(100% - var(--p)),var(--g)) bottom;
  background-size:100% 51%;
  background-repeat:no-repeat;
}

<button class='triangle'>
 some content
</button>

<button class='triangle' style="--p:60%">
 some content
</button>


<button class='triangle' style="--p:20%;--g:blue 135deg,pink 0">
 some content
</button>

Method 2

it’s better to use rgba() or hsl or HEX:

background: linear-gradient(deg or (from to),rgba(),rgba());

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0