Morph button by cordrops

respect for codrops, thanks for the code. http://tympanus.net/codrops/2014/05/12/morphing-buttons-concept/

by John Doe

HTML

<div class="morph-button morph-button-modal morph-button-modal-2 morph-button-fixed">
                <button type="button">Morph this button</button>
                <div class="morph-content">
                        <div>
                                <div class="content-style-form content-style-form-1">
                                        <span class="icon icon-close">Close the dialog</span>
                                        <h2>After morph</h2>
                                        <form>
                                                <p><label>Email</label><input type="text" /></p>
                                                <p><label>Password</label><input type="password" /></p>
                                                <p><button>Login</button></p>
                                        </form>
                                </div>
                        </div>
                </div>
            </div>

CSS

/*=======================*/
 /*MORPHING BUTTON CONCEPT*/
/*=======================*/
.morph-button {
	position: relative;
	display: block;
	margin: 0 auto;
}
.morph-button button:hover{
        cursor:pointer;
}
.morph-button .icon-close{
    cursor: pointer;
}
.morph-button > button {
	position: relative;
	border: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 300;
	overflow: hidden;
        font-family: lato;
        font-size: 20px;
}
.morph-button.open > button {
	pointer-events: none;
}
.morph-content {
	pointer-events: none;
}
.morph-button.open .morph-content {
	pointer-events: auto;
}
.content-style-form h2{
    font-weight: 300;
    color: #FFFFFF;
}
/* Common styles for overlay and modal type (fixed morph) */
.morph-button-fixed,
.morph-button-fixed .morph-content {
	width: 280px;
	height: 60px;
}
.morph-button-fixed > button {
	z-index: 1000;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.1s 0.5s;
	transition: opacity 0.1s 0.5s;
}
.morph-button-fixed.open > button {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
}
.morph-button-fixed .morph-content {
	position: fixed;
	z-index: 900;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}
.morph-button-fixed.open .morph-content {
	opacity: 1;
}
.morph-button-fixed .morph-content > div {
	visibility: hidden;
	height: 0;
	opacity: 0;
	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}
.morph-button-fixed.open .morph-content > div {
	visibility: visible;
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}
.morph-button-fixed.active > button {
	z-index: 2000;
}
.morph-button-fixed.active .morph-content {
	z-index:...

JavaScript

/*=======================*/
       /*MORPHING BUTTON CONCEPT*/
      /*=======================*/
      
/* Modernizr 2.8.1 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-csstransitions-shiv-cssclasses-prefixed-testprop-testallprops-domprefixes-load
 */
;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.8.0",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.csstransitions=function(){return D("transition")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return...