Action Button Intro Effect

With the release of Material Design Lite, an official framework smoothing the way for Material Design everywhere, it seemed like perfect timing to put this simple intro effect out there.

See Action Button Intro Effect by Paul (@plfstr on CodePen.

Based on my Hop Over Notification demo - hey, everything is a remix - the effect reinforces the principle of layers and animation in Material Design language reinforcing hierarchy. Perfect for highlighting your primary action button to new users.

This effect is as simple (un-prefixed!) as adding mdl-button--primaryintro to the <button> which is your primary action and including the following style to the Material Design Lite framework:

.mdl-button--primaryintro {
	animation: primaryintro ease-out .5s both 1.5s;
	}

@keyframes primaryintro {
	0%   {
		transform: translate(0, -36px);
	  	z-index: -1;
	}
	50% {
	  	transform: translate(0, 27px);
	  	z-index: -1;
	}
	51% {
	  	z-index: 999;
	}
	100% {
	  	transform: translate(0, 0);
  	}
}

To see the effect again click ‘rerun’ on the CodePen embed or on the Action Button itself

Posted 08/07/2015