Button Border animation
Hey Guys, just a quick question, if i wanted to have a button, with the border and text having a gradient color, with a rotation animation, is it possible to do that with just a button element? I see a lot of solutions with a div but prefer to stay with button if possible?
7 Replies
If you can do it with a div, you can do the same things with a button 🙂
Okay perfect, good to know ill just keep trying, thanks!
If you have some code that's not working, feel free to throw it into a codepen and share where you're stuck 🙂
https://codepen.io/Belbron-Emanoel/pen/GgKWyPG
Here it is! Its not my code, i grabbed it off the web, from an article (can't find it now)
Two things i wish to achieve
1) the text itself becomes a gradient (the hello there!)
2) the gradient rotates 360 degrees, the common effect we see everywhere on the web now.
Appreciate you helping me out!
You were close with the
-webkit-background-clip on the pseduoelement text, but it was empty because your data attribute wasn't set up correctly. Here's a slightly messy proof of concept I threw together
https://codepen.io/Beanie127/pen/emOvyaZMade some notes in the comments, but it works like this:
- Use @property to define a custom property, which can then be animated
- Set that custom property as the starting angle of your gradient
- then animate it with @keyframes
More general notes:
- Data attributes need to be named on the element, you can't just set content to
attr(data)
- Keep the text in the button so it's screen-reader accessible, but make it visually hidden so it doesn't conflict with the text on the pseudoelement
- I turned the gradient into its own custom prop as well, so you don't have to update it in three different places
- I set the gradient to a conic gradient and added more colours; if it's just two, you get a 'pulse' effect when the gradient crosses the wide part of the element which is quite unpleasant. You generally need a lot of colours to make it work, and if using a conic gradient, you also have to put the same colour at start and end to avoid a hard stop
Setting aside the coding for a second, this was a fun exercise, but from a UX/accessibility standpoint it's basically illegible with bright colours and a white background. I increased the font weight, made it almost twice the size, set it against a dark background and put a fairly slow animation on it — it's still rather difficult to read
I probably wouldn't put an animated gradient on UI text in production — maybe on a big weighty line of hero text, but even then, less is usually more when it comes to animationThat's awesome! Thanks so much for helping me with this!
Yeah definitly not something to push into production lol. I think if i narrow the colors that its rotating through, it could help with the accessibility/UX. maybe just reds and blues 🙂 gonna give that a shot.