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! - 6 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

Left (default)

Right

Top

Bottom

Button Demo 3

(can be used only with <button> tag)

Hover on button to check the effect

Vertical (default)

Horizontal

Horizontal and Vertical

Diagonal

Button Demo 4

Hover on button to check the effect

Button Demo 5

Hover on button to check the effect

Button Demo 6

Hover on button to check the effect

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="bg" - a big button
    • use data-filled="filled" attribute to create a filled button (it's of 'empty') style by default
    • use data-direction attribute to add an effect direction (Only for #2 and #3 Button Demo):
      Button Demo #2 data-direction attributes
      data-direction="left"
      or no data-direction attribute
      Button Demo #2 Left effect
      data-direction="right" Button Demo #2 Right effect
      data-direction="top" Button Demo #2 Top effect
      data-direction="bottom" Button Demo #2 Bottom effect
      Button Demo #3 data-direction attributes
      data-direction="vertical"
      or no data-direction attribute
      Button Demo #3 Vertical effect
      data-direction="horizontal" Button Demo #3 Horizontal effect
      data-direction="horz-vert" Button Demo #3 Horizontal and Vertical effect
      data-direction="diagonal" Button Demo #3 Diagonal effect
    <button type="submit" data-size="sm" data-filled="filled" data-direction="horz-vert">Submit<button>
    Helps to create small filled button with a Horizontal and Vertical direction of Button Demo #3      
    
                        
  • Add foxholder-styles.css from the src folder in your <head>

    <link rel="stylesheet" href="css/foxholder-styles.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.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 - 6), if you need a button effect
      });