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.

 

See the Pen
Link Fancy Box Animation – Old version by Matt Graham (@themattyg)
on CodePen.

 

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.

 

See the Pen
Link Underline Animation from LetsWP.io by Firsh (@Firsh)
on CodePen.

 

That helped me get one that didn’t have a background, and helped give it a more natural hover effect.

 

See the Pen
Link Fancy Box Animation by Matt Graham (@themattyg)
on CodePen.