Have a button with gradient property have curved rounded edges on the gradient color-CodePudding

I have a requirement to have a button which should display two colors on it. I was able to achieve mix up the colors to a certain level using gradient property but not able to produce the exact one. I want the gradient color set inside a button have curved and rounded edges.

Below is my code:

.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'>
  Linear Check 
</button>

Using the below code in was able to achieve the below output:

But my actual requirement is to have the edges of the gradient color(blue) to be rounded rather than have sharp steep edges. So the requirement it would look similar like the below:

As in the image i want the edges to be curved and rounded.Can this be achieved using the Gradient properties. Also is there anyway to achieve this using the linear gradient property or radial gradient instead of going with the conical one .Thanks

CodePudding user response：

By using pseudo elements you can use these styles to achieve what you mentioned:

.triangle{
    padding:20px;
    border:none;
    background-color: yellow;
    position: relative;
    overflow: hidden;
}

.triangle::after {
    content: "";
    background-color: red;
    position: absolute;
    top: 10%;
    left: -10%;
    width: 25%;
    height: 80%;
    border-radius: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>btn gradient</title>
    <link rel="stylesheet" href="style1.css">
</head>
<body>
    <button class='triangle'>
    Linear Check 
    </button>
</body>
</html>

You can change the values if you need.

CodePudding user response：

I think that the easiest way to solve it, is using div instead of button. So:

Replace the button element with div

<div class="triangle">Click me</div>

.triangle{
  /* your CSS rules from your question... */
  
 /* Give the button the wanted radius here */
    border-radius: 15px;
}

/* Give the div button effect when hover*/
.triangle:hover {
    box-shadow: 0px 5px 15px -5px;
    transform: scale(1.03);
}

/* Give the div button effect when click */
.triangle:active {
    box-shadow: 0px 4px 4px;
    transform scale(.98);
}