Make a game like effects to input fields with jQuery plugin
Jquery 30-Sep-2019

Make a game like effects to input fields with jQuery plugin

If you ever wanted to add some effects to your form input fields to make it look like video games fields, you are in the right place . It’s really one of the most outstanding jQuery styling plugins that I ever stumbled upon. Today we will be viewing the FancyInput plugin and applying some of it’s great effects.

Using it is so simple and straightforward as follows:

Step 1 – Download the plugin from, extract it in the same folder that includes your HTML file. The extraction will create a folder called fancyInput-master.

Step 2 – Include the jQuery library and link the following two css files in the <head> tag.

<link rel="stylesheet" href="css/fancyInput.css">
<link rel="stylesheet" href="css/styles.css">
<script src='js/jquery-1.9.1.min.js'></script>

Step 3 – Create an input field wrapped in a div tag and assign a class to it.

<div style="margin: 10px 0px;">
<input type="text" class="fancy_effect1" value="effect 1">
Step 4 – Include this JS file before the end of the <body> tag.
<script src='js/fancyInput.js'></script>
Step 5 – Call the fancyInput() function with the desired effect number (from 0 to 4).
<script type="text/javascript">

For a full page example with all the 5 effects view the demo or download the files.


– The plugin effects can be also applied to text areas.


– The plugin doesn’t support internet explorer browsers.

I hope you guyz like this simple plugin tutorial and please share this with your friends and write your reviews in comments.