0

I am trying to make the button gradient in Bootstrap. But it doesn't work.

My CSS:

.btn-grad {background-image: linear-gradient(to right, #4776E6 0%, #8E54E9 51%, #4776E6 100%)}
.btn-grad:hover { background-position: right center; }

And my code:

<a class="btn btn-grad text-white">
 <p>ACCESS ON THE WEB</p>
</a>

Expected result:

When I brought the mouse over it, it should have worked animatedly. It looks just like an image.

Here is the result: my result

zombie babe
  • 33
  • 3
  • I edited now. When I brought the mouse over it, it should have worked animatedly. But now, it looks like an image. – zombie babe Apr 24 '20 at 11:22
  • Note that 'right center' is equivalent to 100% 50% so your understand why the duplicate. (you will also find it in the duplicate by the way) – Temani Afif Apr 24 '20 at 11:23

0 Answers0