Unique Form Animations Kit

Just pick the most fitted and install on your website in 1 minute!

  • Placeholder Animations (input and textareas) - 15 unique demos!
  • Button animations new! - 8 nice demos!
  • Checkboxes and radiobutton animations (coming soon!)

Placeholder Effects

Placeholder Demo 1

Click on textarea or input to check

Placeholder Demo 2

Click on textarea or input to check

Placeholder Demo 3

Click on textarea or input to check

Placeholder Demo 4

Click on textarea or input to check

Placeholder Demo 5

Click on textarea or input to check

Placeholder Demo 6

Click on textarea or input to check

Placeholder Demo 7

Click on textarea or input to check

Placeholder Demo 8

Click on textarea or input to check

Placeholder Demo 9

Click on textarea or input to check

Placeholder Demo 10

Click on textarea or input to check

Placeholder Demo 11

Click on textarea or input to check

Placeholder Demo 12

Click on textarea or input to check

Placeholder Demo 13

Click on textarea or input to check

Placeholder Demo 14

Click on textarea or input to check

Placeholder Demo 15

Click on textarea or input to check

Button Effects

Button Demo 1

Hover on button to check the effect

Button Demo 2

(can be used only with <button> tag)

Hover on button to check the effect

Default (data-effect-parameter="left")

Right (data-effect-parameter="right")

Top (data-effect-parameter="top")

Bottom (data-effect-parameter="bottom")

Button Demo 3

(can be used only with <button> tag)

Hover on button to check the effect

Default (data-effect-parameter="vert")

Horizontal (data-effect-parameter="horz")

Horizontal and Vertical (data-effect-parameter="horzVert")

Diagonal (data-effect-parameter="diagonal")

Button Demo 4

Hover on button to check the effect

Button Demo 5

(can be used only with <button> tag)

Hover on button to check the effect

Here you need to specify text you want to show on hover in data-effect-parameter (data-effect-parameter="Your Text")

Button Demo 6

(can be used only with <button> tag)

Hover on button to check the effect

Default (data-effect-parameter="horz-side")

Horizontal Center (data-effect-parameter="horz-center")

Horizontal and Vertical (data-effect-parameter="horzVert")

Button Demo 7

(can be used only with <button> tag)

Hover on button to check the effect

Default (data-effect-parameter="inside")

Outside (data-effect-parameter="outside")

Button Demo 8

Hover on button to check the effect

Shadow size small (data-effect-parameter="sm")

Default (data-effect-parameter="md")

Shadow size large (data-effect-parameter="lg")

Get it Now!

How to Use

  • Basic HTML markup

    <form class="your-class">
        .... your inputs and textareas and your submit button 
      </form>
    
                        
  • Use placeholder attribute and id attribute for inputs and textareas.

    <form class="your-class">
      <input id="your-id-1" type="text" placeholder="My Input" />
      <textarea id="your-id-2" placeholder="My Textarea"></textarea>
      <button type="submit">Submit</button> also you can use input with type="submit" as a button
    </form>    
    
                        
  • Customize your button with data-attributes:

    • use data-size attribute to customize a button size (by default it's middle):
      • data-size="sm" - a small button
      • data-size="md" - a middle button
      • data-size="lg" - a large button
    • use data-effect-parameter attribute to add an attribute for effect like direction (only for Demos with multiple variants, like Demo #2). Proper data-effect-parameter you can find in the parentheses near the demo variant name. If you don't specify data-effect-parameter, the default variant will be applied.
    <button type="submit" data-size="sm" data-effect-parameter="horzVert">Submit<button>
    Helps to create small button with a Horizontal and Vertical direction of Button Demo #3
    
                        
  • Add foxholder.min.css from the src folder in your <head>

    <link rel="stylesheet" href="css/foxholder.min.css" />
                        
  • Add foxholder.min.js from src folder (or foxholder.js if you need a developer version) before closing <body> tag after jQuery init:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="scripts/foxholder.min.js"></script>
                        
  • Initialize your Foxholder in your script file or an inline script tag

    
      jQuery('.your-class').foxholder({
        placeholderDemo: 1, // for placeholder demo (1 - 15)
        buttonDemo: 1 //for button demos (1 - 8), if you need a button effect
      });