Get new jQuery plugins just once a week

×

Quttons

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

Download

Example

Quttons jQuery plugin

Material


Quttons are buttons made of Quantum Paper

Online Demo

Slow Mo Demo

Dependencies

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
    </div>
</div>

Step 3, Wrap created dialog in a div

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

Step 4, Initialize Qutton

var quttonUpload = Qutton.getInstance($('#qutton_upload'));
quttonUpload.init({
    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
Quttons

Related posts:

Geolocation
WhatsNearby
Tabbed Content

To install using Bower
bower install Quttons

Quttons jQuery plugin

http://jquer.in/wp-content/uploads/2015/11/Quttons.gif

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever