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:
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:
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.