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:


Download the plug-in from above link.


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>


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


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:

.y {

  background-color: #e5ae2d;

  width: 200px;

  height: 100px ;



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:

<div id="container">

    <h2>A demo of fancy button</h2>

  <div class="fancy-button r"></div>

  <a href="http://www.google.com" target="_blank" class="fancy-button g"></a>

  <div class="fancy-button b"></div>

  <div class="fancy-button y"></div>



See the complete code and output on the demo page.