+ 2

Can't animate and make it rounded corner.

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

13th Feb 2019, 4:45 AM
Alfred
Alfred - avatar
3 Answers
+ 5
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
13th Feb 2019, 1:19 PM
Gordon
Gordon - avatar
+ 5
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?
13th Feb 2019, 4:54 AM
Gordon
Gordon - avatar
0
I added the link now, and the animation that i was talking about is making the gradient colors move if the button is clicked
13th Feb 2019, 10:23 AM
Alfred
Alfred - avatar