Can't animate and make it rounded corner.

Question

Im trying to create a gradient rounded ghost button, i created the gradient button border but it can't be set to rounded. And i dont know how can i animate it.
here's the code:
https://code.sololearn.com/W1GmRb93HaL3/?ref=app

Answer 1

https://code.sololearn.com/WnH5R6JatVKw/?ref=app

Your method works for static gradient only, to animate the gradient border:

1. Don't border-image: linear-gradient
Use background-position of a pseudo element in keyframes so background: linear-gradient and then background-size

2. Don't background: transparent
Fill color to mask the underlay animating gradient to make it look like border.

Reference:
https://code.sololearn.com/WnH5R6JatVKw/?ref=app

Answer 2

1. Cannot see your html part.

Put it in code playground and share the link here

2. There are five ways of doing it. Depending on your need.

For the animation, what effect do you want to achieve?

Changing color or toggle between round corner vs rectangular corner?

On hover event or keep animating?

Answer 3

I added the link now, and the animation that i was talking about is making the gradient colors move if the button is clicked