Gradient Border Animation
I am trying to make a smoothish animation around this border, but cant really use an svg in the markup. Its almost right except at the 0deg and 180deg mark it gets very very small. is there any values i can adjust so that its about the same length all the way around, doenst have to be perfect .
Also im putting the pseudo elements on the parent because i had them on the anchor tag which was working until the 'hang" and hang-sink" animations ran on hover, then the z-index stopped keeping the pseudos behind the button and they were instead on top. <- this link shows the behaviour im getting with the pseudo elements on the <a> instead of the wrapper. i would like to be able to put the pseudo elements on the <a> itself and not the parent wrapper so it inherits the animation and the border radius but am not sure how to combat the z-index issue.
Also im putting the pseudo elements on the parent because i had them on the anchor tag which was working until the 'hang" and hang-sink" animations ran on hover, then the z-index stopped keeping the pseudos behind the button and they were instead on top. <- this link shows the behaviour im getting with the pseudo elements on the <a> instead of the wrapper. i would like to be able to put the pseudo elements on the <a> itself and not the parent wrapper so it inherits the animation and the border radius but am not sure how to combat the z-index issue.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
