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
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.
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:
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.
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:
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> </div>
See the complete code and output on the demo page.