December 3, 2014 8:50 am

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.

Make a game like effects to your form input fields with this awesome jQuery plugin

[wpdm_file id=118]DEMO

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.

Author Amr Abdou

A full-stack web developer, Linux enthusiast, freelance tech writer & open-source supporter. Loves finding quit corners in public places or cafes accompanied by his laptop to try changing the world from there. You can check his latest works at or follow him on facebook, twitter, Linkedin or Google+

Tutorial Categories:

3 responses to “Make a game like effects to input fields with jQuery plugin”

  1. alignwebs says:

    Nice tut 🙂

  2. Vaibhav says:

    Nice tut… but when we select the text of input field it’s not covered the full text of input.

Leave a Reply

Your email address will not be published. Required fields are marked *