This time I will share jQuery Plugin and tutorial about jQuery Plugin For Embedding Input Fields Into Buttons – FormButtons, hope it will help you in programming stack.
FormButtons is a jQuery plugin that turns a button into an input field when clicked, inspired by Kevin Tunc’s ‘Create New’ button concept.
How to use it:
1. Import the required form_buttons.css
in the head section of the document.
1 |
< link rel = "stylesheet" href = "css/form_buttons.css" > |
2. Import the OPTIONAL Font Awesome 4 for submit buttons.
1 |
< link rel = "stylesheet" href = "font-awesome.min.css" > |
3. Create a button with a input field embedded. The input width is based on the length of the label.
1 |
< div class = "form-button fixed-width blue" > |
2 |
< label for = "email" class = "cta" > |
3 |
< i class = "icon fa fa-newspaper-o" ></ i > |
4 |
< span class = "text" >Get our newsletter</ span > |
6 |
< input type = "text" placeholder = "Enter your email" id = "email" name = "email" class = "input" > |
7 |
< button type = "submit" class = "submit" >< i class = "fa fa-arrow-right" ></ i ></ button > |
4. Replace the CSS class fixed-width
with full-width
to create a full-width form button.
1 |
< div class = "form-button full-width blue" > |
5. Import jQuery library and the form_buttons.min.js
script.
1 |
< script src = "js/min/form_buttons.min.js" ></ script > |
This awesome jQuery plugin is developed by sconstantinides. For more Advanced Usages, please check the demo page or visit the official website.