How do i make button that fade between color E.g purple to blue in html

Question

I don't know how to make a button that begin with blue from the right and the turns more purple to the left in HTML and CSS

  <button style="background-color: purple">Shop</button>

Answer 1

You can use the linear-gradient option of the css background property to do this. See below and tweak the colors to your needs:

.blue-purple-gradient{
  background: linear-gradient(0.25turn,purple, blue);
  color:white;
}

<button class='blue-purple-gradient'>Shop</button>