Recent searches
Search options
My take on those trendy call-to-action buttons. You know the ones. So shiny. Big vibes. All CSS.
There are a few interesting parts to it, especially with the use of registered custom properties for smooth gradient rotations and hover transitions. Check out my latest post that gets into the details: https://ryanmulligan.dev/blog/css-property-new-style/
@hexagoncircle thanks for a really nice article, in particular the trick for slowing down a rotation animation blew my mind! I've wanted this many times and didn't know it could be done with pure css.
have question:
What is your thought process for actually designing these type of high gloss buttons? does it come from studying physical material? it's never intuitive to me why for instance the shine should get longer when hovered: it looks great but what made you think of that?
@maxbittker Hey thanks! I recommend checking out css-tip.com for a slew of other amazing tricks.
As for your question, I experiment until I feel that I've got something nice cooking. This particular demo builds off an established trend, so I had somewhat of a starting point.
@hexagoncircle That’s pretty dang sexy.
@hexagoncircle this is, obviously, an excellent article and I learned a lot, and thank you lots for writing it!
This almost makes up for the sinking feeling I felt when I saw the codepen embed and thought, awh man, codepen are gonna make me sign up for some premium thingy to see this? that sucks!
@sil Appreciate the kind words! What a bummer it would be if we had to buy some premium subscription to view a CodePen of a shiny button. Twist: It's the same button we clicked to buy the premium subscription 
@hexagoncircle if they ever do this (god forbid) they should _definitely_ do it so that I click the button, pay the money, and then it shows your very same identical button demo so nobody realises :)