How To Animate Buttons on Hover with GSAP

[jemfrim949]

Hello,

 

I am a fan of the 3d button hover options under the Box Shadow section shown on this page http://www.greensock.com/css3/  I am attempting to replicate the box titled "sharp shadow" (with then end goal of moving up to the more complex box shadow features in that section)

 

Conceptually I am not understanding how to activate a hover design animation with tweens. I have attached a codepen where I have the design ready to go when the page loads; however, nothing is happening. 

See the Pen vzjDB by anon (@anon) on CodePen

 

Cheers In advance!

 

(PS Newbie)

[Carl]

First, thanks so much for creating the CodePen demo. You don't know how helpful that is. It saves us lots of time.

 

Your original pen had one formatting error, missing a closing } or ) which was showing up in the console. Also the duration variable wasn't defined. Little stuff.

 

Here is a working version for you to play with: http://codepen.io/GreenSock/pen/IJfwE