Gradient with Shape

Question

I\'m trying to do a gradient on a button but I can\'t make it have the same gradient as the other part of the button. I tried adding a gradient inside a gradient but it doesn\'t

Answer 1

Consider a skew transformation on a pseudo element where you apply the gradient. Since it's a top/bottom direction, the gradient will not get affected by the skewing

button{
  color: white;
  padding: 3px 3px 3px 0px;
  border: 0px;
  font-size: 20px;
  width: 200px;
  text-align: right;
  position: relative;
  cursor: pointer;
  overflow:hidden;
  background:none;
  z-index:0;
}
button::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform-origin:top;
  transform:skewX(50deg);
  background:linear-gradient(rgb(200, 205, 212), rgb(149, 151, 155));
}

<button>Meet the Team</button>

For another direction, you may need to adjust the degree of the gradient:

button{
  color: white;
  padding: 3px 3px 3px 0px;
  border: 0px;
  font-size: 20px;
  width: 200px;
  text-align: right;
  position: relative;
  cursor: pointer;
  overflow:hidden;
  background:none;
  z-index:0;
}
button::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform-origin:top;
  transform:skewX(50deg);
  background:linear-gradient(-50deg,purple,red);
}

<button>Meet the Team</button>

Answer 2

That's because you are already using the linear-gradient property as a trick to create a triangle end on your button.

You can't use the same property multiple times. If you want a triangle end, maybe stick with flat color on your button.