Material Inspired Morphing Overlay with jQuery and CSS3

A Material Design inspired morphing overlay that uses CSS3 transitions and a little jQuery magic to make an action button morph into a full-sized, closeable content overlay. 

Basic usage:

1. Load the optional Font Awesome 4 for button icons.

<link rel="stylesheet" href="font-awesome.min.css">

2. Create an action button inside a specified container.

<div class="button-wrapper">
  <div class="layer"></div>
  <button class="main-button fa fa-info">
  </button>
</div>

3. Add layered content into the overlay.

<div class="layered-content">
  <button class="close-button fa fa-times"></button>
  <div class="content">
    Content goes here
  </div>
</div>

4. The core CSS / CSS3 styles for the morphing button / overlay.

.button-wrapper {
  width: 50px;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  right: 20px;
  bottom: 20px;
}

button {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
  z-index: 9;
  position: relative;
}

.main-button {
  background: #ff2670;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  background: #ff2670;
  border-radius: 50%;
  z-index: -99;
  pointer-events: none;
}

.button-wrapper.clicked {
  -webkit-transform: rotate(90deg) translateY(-96px);
  -ms-transform: rotate(90deg) translateY(-96px);
  transform: rotate(90deg) translateY(-96px);
  right: 0;
  bottom: 0;
  -webkit-transition: .3s all ease .6s;
  transition: .3s all ease .6s;
}

.button-wrapper.clicked .main-button {
  opacity: 0;
  -webkit-transition: .3s all ease .3s;
  transition: .3s all ease .3s;
}

.button-wrapper.clicked .layer {
  -webkit-transform: scale(100);
  -ms-transform: scale(100);
  transform: scale(100);
  -webkit-transition: 2.25s all ease .9s;
  transition: 2.25s all ease .9s;
}

.layered-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0;
}

.layered-content.active { opacity: 1; }

.close-button {
  background: white;
  position: absolute;
  right: 20px;
  top: 20px;
  color: #ff2670;
}

.layered-content.active .close-button {
  -webkit-animation: .5s bounceIn;
  animation: .5s bounceIn;
}

5. The core jQuery script to toggle the CSS classes.

(function(){
  'use strict';

  var $mainButton = $(".main-button"),
      $closeButton = $(".close-button"),
      $buttonWrapper = $(".button-wrapper"),
      $layer = $(".layered-content");

  $mainButton.on("click", function(){
      $buttonWrapper.addClass("clicked").delay(1500).queue(function(){
          $layer.addClass("active");
      });
  });

  $closeButton.on("click", function(){
      $buttonWrapper.removeClass("clicked");
      $layer.removeClass("active");
  });

})();

---

This awesome jQuery plugin is developed by balapa. For more Advanced Usages, please check the demo page or visit the official website.