Working on a new project that will (hopefully) be launched soon, I received designs a few weeks ago. Well designed, nothing out of the ordinary, except this button:
I love the design, so I really wanted the look and animation to be amazing. So I found a tutorial that uses an outer and inner element, the outer element having a gradient and the inner element having a solid background.
It looked good, and the hover effect (not listed) didn’t look too bad, though the animation was much too abrupt. It also had a black background, which the design called for it to be on an image background (darkened, of course, to aid in visibility). After scouring the internet some more, I found the CodePen below that put me on the right track.
That helped me get one that didn’t have a background, and helped give it a more natural hover effect.