Forms within buttons, oh my!
CSS HTML JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
img
js
sass
.gitignore
LICENSE
README.md
bower.json
gulpfile.js
index.haml
index.html
package.json

README.md

Forms within buttons, oh my!

Inspired by https://dribbble.com/shots/1937525-Create-New-Project

Examples

Examples

Getting started

  1. Get the JS (also requires jQuery): Normal JS or Minified JS
  2. Get the CSS: Sass or Normal CSS or Minified CSS
  3. Add the buttons: HTML example below or HAML
<div class="form-button auto-close red">
  <label for="name" class="cta">
    <i class="icon fa fa-file-text-o"></i>
    <span class="text">Create new file</span>
  </label>
  <input class="input" type="text" placeholder="File name" id="name" name="name">
  <button class="submit" type="submit">
    <i class="fa fa-arrow-right"></i>
  </button>
</div>

Options

Options can be set by mixing & matching classes on <div class="form-button">

  • Width: Fixed-width by default. Add class "full-width" to have the input expand to fill its container.
  • Auto-close: Class "auto-close" returns the button to its initial state when the user clicks elsewhere.

Feedback

Feel free to open issues with suggestions or submit pull requests.