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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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.

Please let me know if this is possible and can be achieved using linear gradient . Thanks in advance

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>