index.haml

!!! 5
%html
  %head
    %title Forms within buttons
    %meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
    %link{ rel:"stylesheet", type: "text/css", href: "https://fonts.googleapis.com/css?family=Montserrat:400,700" }
    %link{ rel: "stylesheet", type: "text/css", href: "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" }
    %link{ rel: "stylesheet", type: "text/css", href: "css/min/all.min.css" }
    %script{ type: "text/javascript", src: "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" }
    %script{ type: "text/javascript", src: "js/min/form_buttons.min.js" }

  %body
    %a{ href: "https://github.com/sconstantinides/FormButtons" }
      %img{ style: "position: absolute; top: 0; right: 0; border: 0;", src: "https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67", alt: "Fork me on GitHub", data-canonical-src: "https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" }

    %form
      .row
        %h2
          Fixed-width buttons
          %small Input width based on the length of the label

      .row
        .form-button.auto-close.red
          %label.cta{ for: "name" }
            %i.icon.fa.fa-file-text-o
            %span.text Create new file
          %input.input{ type: "text", placeholder: "File name", id: "name", name: "name" }
          %button.submit{ type: "submit" }
            %i.fa.fa-arrow-right

      .row
        .form-button.auto-close.blue
          %label.cta{ for: "email" }
            %i.icon.fa.fa-newspaper-o
            %span.text Get our newsletter
          %input.input{ type: "text", placeholder: "Enter your email", id: "email", name: "email" }
          %button.submit{ type: "submit" }
            %i.fa.fa-arrow-right

      .row
        %h2
          Full-width buttons
          %small Inputs expand to fill the container

      .row
        .form-button.full-width.auto-close.green
          %label.cta{ for: "search" }
            %i.icon.fa.fa-search
          %input.input{ type: "text", placeholder: "Search...", id: "search", name: "search" }
          %button.submit{ type: "submit" }
            %i.fa.fa-arrow-right

      .row
        .form-button.full-width.auto-close.purple
          %label.cta{ for: "share" }
            %i.icon.fa.fa-share-alt
            %span.text Share
          %input.input{ type: "text", placeholder: "Email or phone number", id: "share", name: "share" }
          %button.submit{ type: "submit" }
            %i.fa.fa-arrow-right