Material Inspired Morphing Button with jQuery and velocity.js - Quttons

Quttons is a Javascript library which uses jQuery and velocity.js to create Material Design inspired action buttons that morphs into a floating dialog popup when triggered.

How to use it:

1. Load the necessary jQuery, velocity.js and velocity.ui.js in your document.

<script src="jquery-2.1.4.min.js"></script>
<script src="velocity.min.js"></script>
<script src="velocity.ui.min.js"></script>

2. Load the quttons.js script after jQuery library.

<script src="Quttons.js"></script>

3. Create the html for the dialog box.

<div class="qutton" id = "qutton_delete">
  <div class="qutton_dialog" id="deleteDialog">
    <h2>Are You Sure?</h2>
    <div id="button_basic_confirm_delete">Yes</div>
  </div>
</div>

4. The core CSS for the morphing button.

* {
  margin : 0;
  padding : 0;
}

.qutton {
  box-sizing : content-box !important;
  background-repeat : no-repeat !important;
  background-position: center center !important;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
  cursor : auto;
}

.qutton.close {
  position : absolute !important;
  cursor : pointer;
}

5. Full config options.

// width of the morphing button
width : 60,

// height of the morphing button
height : 60,

// background color
backgroundColor : "#EB1220",

// Url of the icon that the button is supposed to hold
icon : "", 

// easing effect
easing : 'easeInOutQuint'

---

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