Get new jQuery plugins just once a week



FavoriteLoadingAdd to favorites

May 12, 2016

Quttons | jQuery plugin to creae buttons made of Quantum Paper similar to Material

Quttons is a jQuery plugin to create buttons created out of Quantum paper similar to Google Material

Created by Nash Vail



Quttons jQuery plugin


Quttons are buttons made of Quantum Paper

Online Demo

Slow Mo Demo


How To Use

Switch to gh-pages branch to look at code used in demo site.

Step 1, Include Dependencies :

<script src = "Path/To/jQuery" type = "text/javascript"></script>
<script src = "Path/To/velocity.js" type = "text/javascript"></script>
<script src = "Path/To/velocity.ui.js" type = "text/javascript"></script>
<script src = "Path/To/Quttons.js" type = "text/javascript"></script>
<link rel = "stylesheet" href = "Path/To/Quttons.css" />

Step 2, Design your dialog :

<div id="uploadDialog">
    <h2>Upload a new file</h2>
        <input type="text" id = "fileUrl" placeholder = "Enter URL">
    <div id="button_basic_upload"> Choose a file to upload

Step 3, Wrap created dialog in a div

<div class = "qutton" id = "qutton_upload">
 ...(Dialog created in previous step) ...

Step 4, Initialize Qutton

var quttonUpload = Qutton.getInstance($('#qutton_upload'));
    icon : './images/icon_upload.png',
    backgroundColor : "#917466"
Argument Description Default
icon Icon to be displayed in Qutton None
backgroundColor Background Color of Qutton #FE0000
width Width of the Qutton 60
height Height of the Qutton 60
easing Easing for the animation easeInOutQuint

Related posts:

Open js grid

To install using Bower
bower install Quttons

Quttons jQuery plugin

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever