Material Inspired Expanding Card with jQuery and CSS3

A Material Design inspired morphing card concept which uses several CSS3 properties and a little jQuery to transform an action button into a content panel when toggled.

How to use it:

1. Add the action button and content panel into a container element as displayed below.

<div class="container">
  <span class="button">
    +
  </span>
  <div class="content">
    <div class="head">
      <h1>Title</h1>
    </div>
    <div class="body">
     Main content here
    </div>
  </div>
</div>

2. The main CSS / CSS3 styles.

.button {
  cursor: pointer;
  width: 60px;
  height: 60px;
  display: inline-block;
  font-size: 30px;
  line-height: 60px;
  -webkit-transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.container {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 5vh;
  background-color: #03A9F4;
  border-radius: 50%;
  width: 60px;
  max-width: 60px;
  height: 60px;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  overflow: hidden;
  -webkit-transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
  transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
}

.content {
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  width: 100%;
  height: 100%;
  opacity: 0;
  text-align: left;
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s;
}

.content .head { padding: 0 0 20px 0; }

.content .body {
  color: #000;
  color: rgba(0, 0, 0, 0.87);
  background-color: #FFF;
  width: 100%;
  height: 100%;
  padding: 10px 0;
  box-sizing: border-box;
}

3. The core CSS / CSS3 styles for the morphing effect.

.button.expand {
  -webkit-transform: rotate(585deg);
  -ms-transform: rotate(585deg);
  transform: rotate(585deg);
  -webkit-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.container.expand {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
  border-radius: 0;
  width: 80%;
  height: 500px;
  max-width: 700px;
  padding: 0;
  -webkit-transition: all 0.2s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, height 0.3s ease 0.25s;
  transition: all 0.2s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, height 0.3s ease 0.25s;
}

.content.expand {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, opacity 0s;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, opacity 0s;
}

4. Add the latest version of jQuery library to the webpage.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 

5. Bind the click event to the action button and toggle the CSS classes when clicked.

$('.button').click(function (e) {
  e.preventDefault();
  $(this).parent().toggleClass('expand');
  $(this).parent().children().toggleClass('expand');
});

---

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