FAB - Morph - 1

HTML

<div class="fab-btn-card fab-bg-color-white text-center"
     data-fab_card_1_active_on="topArrow"
     data-fab_card_1_active_off="more"
     data-fab_card_1_active_success=""
>
  <a href="#" class="fab-btn-card-expander more bg-color-8"
     data-placeholder="&#xe638"
  >
    <span>
      <span class="s1"></span>
      <span class="s2"></span>
      <span class="s3"></span>
    </span>
  </a>
  <div class="fab-btn-card-container">
      jflkdsjfkldsfjsd<br />
      jlsdjflsjdfsldkfs
  </div>
</div>

CSS

.bg-color-8 {
	background-color: #c256a0 !important; /* bizamajig color - light purple */
}
* { box-sizing: border-box; }
/* START FAB - Button Card Expander */
/* Depends on border-box - * { box-sizing: border-box; } */
.fab-btn-card-expander {
	display: inline-block;
	width: 3em;
	height: 3em;
	background-color: #FFF;
	color: #9e9e9e;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	border-radius: 2em;
	overflow: hidden;
	transform: translateZ(0);
	transition: all 0.5s ease;

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

   	-webkit-tap-highlight-color: transparent;

	-webkit-touch-callout: none;

	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	-khtml-user-select: none;
	user-select: none;


	-moz-transition-property: opacity;
	-o-transition-property: opacity;
	-webkit-transition-property: opacity;
	transition-property: opacity;

	-moz-transition-duration: 0.7s;
	-o-transition-duration: 0.7s;
	-webkit-transition-duration: 0.7s;
	transition-duration: 0.7s;

	-moz-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	-o-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	-webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);

	opacity: 0.5;
}
.fab-btn-card-expander:hover,
.fab-btn-card-expander:focus {
	opacity: 1;
}
.fab-btn-card-expander:hover { box-shadow: 0 0 10px rgba(0,0,0,0.4); }
.fab-btn-card-expander:active { transform: scale(1.1,1.1); }
.fab-btn-card-expander:focus { outline: 0; border:none; color: rgba(0, 0, 0, 0); }
.fab-btn-card-expander > span { display: block; position: relative; width: 2em; height: 2em; transition: transform 0.5s ease; overflow: hidden; margin: .5em; }
.fab-btn-card-expander > span > span { display: block; background-color: #9e9e9e; position: absolute; top: 0; left: 0; width: 2em; height: 2em; transition: all 0.5s ease; border: 1px solid transparent; }

.fab-btn-card-expander.fab-more >...

JavaScript

//	Add ripple effect to our button
	$( document ).on( 'click', '.fab-btn-card-expander', function( e ){
		if ( $(this).find( 'b.fab-drop' ).length === 0 ) {
            $(this).prepend("<b class='fab-drop'></b>");
        }
		fab_drop = $(this).find( 'b.fab-drop' ).removeClass( 'animate' );
		x = e.pageX - fab_drop.width()/2 - $(this).offset().left;
		y = e.pageY - fab_drop.height()/2 - $(this).offset().top;
		fab_drop.css({top: y + 'px', left: x + 'px' }).addClass( 'animate' );
    });
//	Expand card and manage icon when our fab is activated
	$( document ).on( 'click', '.fab-btn-card', function( e ){
//		$(this).find( '.fab-btn-card-container' ).toggleClass( 'active' );
		var $element							= $(this),
            $fab_button							= $element.find( '.fab-btn-card-expander' ),
            $card_container						= $element.find( '.fab-btn-card-container' ),
			input__fab_card_1_active_on			= $element.data( 'fab_card_1_active_on' )		|| '', // 'topArrow'
			input__fab_card_1_active_off		= $element.data( 'fab_card_1_active_off' )		|| '', // 'more'
			input__fab_card_1_active_success	= $element.data( 'fab_card_1_active_success' )	|| '';

         if ( $card_container.hasClass( 'active' ) ) {
			$fab_button.removeClass( 'close fab-more more open play topArrow' ).addClass( input__fab_card_1_active_off );
            $card_container.removeClass( 'active' );
         }
         else {
			$fab_button.removeClass( 'close fab-more more open play topArrow' ).addClass( input__fab_card_1_active_on );
			$card_container.addClass( 'active' );
         }
    });
/* 
//	SEE - http://codepen.io/albebonv/pen/gIlrw
	var classes = '';
	$('input[type=radio][name=button]').each(function() {
		classes += this.value+' ';
	});
	$('input[type=radio][name=button]').change(function() {
		$('header > .fab-btn-card-expander').removeClass(classes).addClass('fab-btn-card-expander '+this.value);
	});
	$('input[type=radio][name=size]').change(function()...