2 Demos to Turn Boring buttons into fancy 3D buttons by jQuery

Creating the 3D Fancy-Buttons

The Fancy-Buttons is a jQuery based plugin for turning the ordinary and “boring” buttons in 3D widget look.

Basically, you may use this plug-in for 3D effect in any HTML element for hover and click state. For example, a div containing text or even a form etc.

The options for this plug-in allows you adding the 3D effect on hover or only click using the jQuery code.

Demo1 Demo2
Developer’s page Download plug-in

Setup fancy-buttons plug-in

Follow these simple steps for setting up this jQuery buttons with 3D effect plug-in:

Step1:

Download the plug-in from above link.

Step2:

Place the styles.css file in the <head> section that comes with the plug-in:

<link rel=”stylesheet” type=”text/css” href=”css/fancy-buttons/styles.css”>

Also, place the JS file before the body end tag:

 <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.12.1.min.js”></script>

<script src=”js/fancy-buttons/fancy-buttons.js”></script>

Step3:

Apply the fancy-button class to any element like a <button> or <div> where you want to create the 3D effect.

Step4:

Use the option hoverable as true or false for enabling or disabling the 3D on hover or not. The default is set as true.

A demo of using button tag with Fancy-Buttons plug-in

In this example, the button tag is used with the fancy-button class for creating the 3D effect. Bring the mouse over the button to see it happen:

jQuery fancy button

See online demo and code

A little CSS is used for the button height and width:

 

See the complete code on the demo page.

A demo of using div tags

For this demo, the div tags are used for creating the 3D boxes. All the div tags are assigned fancy-button class along with their respective CSS classes for styling differently:

jQuery fancy div

See online demo and code

Following is the markup used:

 

See the complete code and output on the demo page.