Fork me on GitHub

Buttons and Forms

the buttons and forms CSS3 styles collection is the easiest way, to make buttons and forms on webpages look great. It’s based on the wonderfull code from Tim O’Donnell and improved by Simon Waldherr. The complete code is licensed under the terms of the MIT-License, which allows you to use and to change everything for free.

Buttons

The "buttons" can be created by adding class="baf" to any appropriate <a>, <button>, or <input> element. 


<a class="baf">New Comment (link)</a>
<input class="baf" type="submit" value="New Comment (submit)" />
<button class="baf">New Comment (button)</button>
New Comment (link)

Buttons with blue or red hover color

The blue or red hover color can be added by adding class="bluehover" or class="redhover" to any button with the baf class. 


<a class="baf bluehover">New Comment (link)</a>
<input class="baf bluehover" type="submit" value="New Comment (submit)"/>
<button class="baf bluehover">New Comment (button)</button>
<br /><br />
<a class="baf redhover">New Comment (link)</a>
<input class="baf redhover" type="submit" value="New Comment (submit)"/>
<button class="baf redhover">New Comment (button)</button>
New Comment (link)

New Comment (link)

Colored Buttons

Colored buttons can be created by adding the red, blue, or green class to your button. 


<a class="baf" href="#button" 
   onclick="if(baf_changeloadingmode(this)){
              if(window.confirm('show class name')){alert(this.className);}
              else{baf_changeloadingmode(this);}};">Info</a>
<a class="baf blue" href="#button" 
   onclick="if(baf_changeloadingmode(this)){
              if(window.confirm('show class name')){alert(this.className);}
              else{baf_changeloadingmode(this);}};">Search</a>
<a class="baf cyan" href="#button" 
   onclick="if(baf_changeloadingmode(this)){
              if(window.confirm('show class name')){alert(this.className);}
              else{baf_changeloadingmode(this);}};">Send</a>
<a class="baf black" href="#button" 
   onclick="if(baf_changeloadingmode(this)){
              if(window.confirm('show class name')){alert(this.className);}
              else{baf_changeloadingmode(this);}};">Abort</a>
<br/><br/>
<a class="baf dark" href="#button" 
   onclick="if(baf_changeloadingmode(this)){
              if(window.confirm('show class name')){alert(this.className);}
              else{baf_changeloadingmode(this);}};">Open Menu</a>
<a class="baf green" href="#button" 
   onclick="if(baf_changeloadingmode(this)){
              if(window.confirm('show class name')){alert(this.className);}
              else{baf_changeloadingmode(this);}};">Success</a>
<a class="baf yellow" href="#button" 
   onclick="if(baf_changeloadingmode(this)){
              if(window.confirm('show class name')){alert(this.className);}
              else{baf_changeloadingmode(this);}};">Warning</a>
<a class="baf red" href="#button" 
   onclick="if(baf_changeloadingmode(this)){
              if(window.confirm('show class name')){alert(this.className);}
              else{baf_changeloadingmode(this);}};">Error</a>
Info Search Send Abort

Open Menu Success Warning Error

Disabled Buttons

Buttons can also be disabled. The traditional style used in Google Calendar displays the button with a white background and greyed out text. Add the disabled class for this style. If you'd rather keep the grey background but dim it, you can add the disabled2 class. 


<a href="#" class="baf disabled">Today</a>
<a href="#" class="baf disabled2">Today</a>
Today Today

Disabled Buttons via Attribute

Buttons can also be disabled via disabled="true" attribute. 


<a href="#" class="baf" disabled="true">Info</a>
<a href="#" class="baf blue" disabled="true">Search</a>
<a href="#" class="baf black" disabled="true">Abort</a>
Info Search Abort

3D Button Style

Give your buttons a 3d style 


<div class="actions baf-container">
  <a class="baf dimension w120" href="#button">baf dimension</a>
  <a class="baf black dimension w120" href="#button">baf black dimension</a><br /><br />
  <a class="baf blue dimension w120" href="#button">baf blue dimension</a>
  <a class="baf cyan dimension w120" href="#button">baf cyan dimension</a><br /><br />
  <a class="baf yellow dimension w120" href="#button">baf yellow dimension</a>
  <a class="baf red dimension w120" href="#button">baf red dimension</a><br /><br />
  <a class="baf green dimension w120" href="#button">baf green dimension</a>
</div>
baf dimension baf black dimension

baf blue dimension baf cyan dimension

baf yellow dimension baf red dimension

baf green dimension

Smaller Buttons

Default buttons too big? Shrink the text-size of the button with the sm class, or the size of the entire button with the mini class. 


<a href="#" class="baf sm">Month</a>
<a href="#" class="baf mini">Month</a>
Month Month

Grouped buttons

Groups of buttons can be created by wrapping them in an element given a class of baf-group. 


<div class="baf-group">
  <a href="#" class="baf">Archive</a>
  <a href="#" class="baf">Spam</a>
  <a href="#" class="baf">Delete</a>
</div>
Archive Spam Delete

Mixed groups

Displaying a mixture of grouped and standalone buttons, as might be seen in a toolbar, can be done by adding another wrapping element with the class baf-container. 

            
<div class="actions baf-container cente">
  <a class="baf" href="#button">Compose New</a>
  <div class="baf-group">
    <a class="baf" href="#button">Archive</a>
    <a class="baf" href="#button">Spam</a>
    <a class="baf" href="#button">Delete</a>
  </div>
  <div class="baf-group minor-group">
    <a class="baf" href="#button">Move to</a>
    <a class="baf" href="#button">Labels</a>
  </div>
  <a class="baf" href="#button">More</a>
</div>
Compose New
Archive Spam Delete
Move to Labels
More

Button Groups

Sometimes your button group should act like a series of buttons, in which selecting one button deselects the others. Add the toggle-buttons class to your button-group div to accomplish this. To set the currently selected button, use the checked class. 


<div class="baf-group toggle-buttons">
  <a class="baf">Day</a>
  <a class="baf">Week</a>
  <a class="baf checked">Month</a>
  <a class="baf">4 Days</a>
  <a class="baf">Agenda</a>
</div>
          

<div class="baf-group toggle-buttons">
  <a class="baf mini">Day</a>
  <a class="baf mini">Week</a>
  <a class="baf mini checked">Month</a>
  <a class="baf mini">4 Days</a>
  <a class="baf mini">Agenda</a>
</div>
Day Week Month 4 Days Agenda

rbuttonbutton Groups

Sometimes your button group should act like a series of buttons, in which selecting one button deselects the others. Add the toggle-buttons class to your button-group div to accomplish this. To set the currently selected button, use the checked class. 


<div class="baf-group toggle-buttons">
  <a class="baf">Day</a>
  <a class="baf">Week</a>
  <a class="baf checked">Month</a>
  <a class="baf">4 Days</a>
  <a class="baf">Agenda</a>
</div>
Radio

Button Groups with Arrows

If you need to show progress steps, you can use the arrow class. 


<div class="baf-group toggle-buttons arrow">
  <a class="baf" style="z-index:8">one</a>
  <a class="baf" style="z-index:7">two</a>
  <a class="baf blue" style="z-index:6">three</a>
  <a class="baf" style="z-index:5">four</a>
  <a class="baf" style="z-index:4">five</a>
</div>
<br><br><hr><br>
<div class="baf-group toggle-buttons arrow smallarrow">
  <a class="baf" style="z-index:8">one</a>
  <a class="baf" style="z-index:7">two</a>
  <a class="baf blue" style="z-index:6">three</a>
  <a class="baf" style="z-index:5">four</a>
  <a class="baf" style="z-index:4">five</a>
</div>
<br><br><hr><br>
<div class="baf-group toggle-buttons arrow">
  <a class="baf darkh" style="z-index:8">one</a>
  <a class="baf darkh" style="z-index:7">two</a>
  <a class="baf blueh" style="z-index:6">three</a>
  <a class="baf greyh" style="z-index:5">four</a>
  <a class="baf greyh" style="z-index:4">five</a>
</div>
<br><br><hr><br>
<div class="baf-group toggle-buttons arrow smallarrow">
  <a class="baf darkh" style="z-index:8">one</a>
  <a class="baf darkh" style="z-index:7">two</a>
  <a class="baf blueh" style="z-index:6">three</a>
  <a class="baf greyh" style="z-index:5">four</a>
  <a class="baf greyh" style="z-index:4">five</a>
</div>
<br><br><hr><br>
<div class="baf-group toggle-buttons arrow">
  <a class="baf black" style="z-index:8">one</a>
  <a class="baf black" style="z-index:7">two</a>
  <a class="baf blue" style="z-index:6">three</a>
  <a class="baf" style="z-index:5">four</a>
  <a class="baf" style="z-index:4">five</a>
</div>
<br><br><hr><br>
<div class="baf-group toggle-buttons arrow smallarrow">
  <a class="baf black" style="z-index:8">one</a>
  <a class="baf black" style="z-index:7">two</a>
  <a class="baf blue" style="z-index:6">three</a>
  <a class="baf" style="z-index:5">four</a>
  <a class="baf" style="z-index:4">five</a>
</div>
one two three four five



one two three four five



one two three four five



one two three four five



one two three four five



one two three four five

Buttons with icons only

Create a button with only an icon (no text) by adding the no-text class, along with one of the nested icon classes below. 

            
<a class="baf no-text">
  <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe091;"></span>
</a>
<a class="baf red no-text">
  <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe05f;"></span>
</a>

Or group them together, just like Gmail's paginator.


<div class="baf-group">
  <a class="baf no-text">
    <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe0aa;"></span>
  </a>
  <a class="baf no-text">
    <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe0a6;"></span>
  </a>
</div>

You can even mix and match with the disabled state.


<div class="baf-group">
  <a class="baf no-text disabled2">
    <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe0aa;"></span>
  </a>
  <a class="baf no-text">
    <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe0a6;"></span>
  </a>
</div>

Mini paginator buttons

You can create tiny Buttons too by adding the xs pg bw and xs pg fw classes. 


<div class="baf-group">
  <a class="baf xs-no-text">
    <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe0a2;"></span>
  </a>
  <a class="baf xs-no-text">
    <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe0a0;"></span>
  </a>
</div>

Buttons with text and icon

A range of icons can be added (only for links and buttons) by adding a code for data-icon. The full list is available in the editor. 


<a class="baf">
<span class="baf-icomoon" aria-hidden="true" data-icon="&#xe049;">&nbsp;</span>
Search</a>
Search
data-icon Example
&#xe094; Add Item
&#xe0aa; Back
&#xe0a6; Forward   
&#xe098; Remove Item
&#xe049; Search
&#xe040; Settings

Button dropdowns

Create buttons with dropdown menus, just like Google Docs, easily. We'll use Twitter Bootstrap's javascript to make it happen. 


<div class="baf-container">
  <div class="baf-group">
    <a class="baf dropdown-toggle w160">
      Dropdown Menu
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Document</a></li>
      <li><a href="#">Presentation</a></li>
      <li><a href="#">Spreadsheet</a></li>
      <li><a href="#">Form</a></li>
    </ul>
  </div>
</div>
<hr/>
<div class="baf-container">
  <div class="baf-group">
    <a class="baf red dropdown-toggle w160">
      Dropdown Menu red
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Document</a></li>
      <li><a href="#">Presentation</a></li>
      <li><a href="#">Spreadsheet</a></li>
      <li><a href="#">Form</a></li>
    </ul>
  </div>
</div>
<hr/>
<div class="baf-container">
  <div class="baf-group">
    <a class="baf green dropdown-toggle w160">
      Dropdown Menu green
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Document</a></li>
      <li><a href="#">Presentation</a></li>
      <li><a href="#">Spreadsheet</a></li>
      <li>
        <a href="#">Form</a></li>
    </ul>
  </div>
</div>
<hr/>
<div class="baf-container">
  <div class="baf-group">
    <a class="baf blue dropdown-toggle w160">
      Dropdown Menu blue
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Document</a></li>
      <li><a href="#">Presentation</a></li>
      <li><a href="#">Spreadsheet</a></li>
      <li><a href="#">Form</a></li>
    </ul>
  </div>
</div>
Dropdown Menu
Dropdown Menu red
Dropdown Menu green
Dropdown Menu blue

We can even create fancy split-button dropdowns in color with icons and dividers!


<div class="baf-group">
  <a class="baf blue">
    <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe03f;">&nbsp;</span>
    Add User</a>
  <a class="baf blue dropdown-toggle">
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li>
      <a href="#">
        <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe096;"></span>
        Action</a></li>
    <li>
      <a href="#">
        <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe097;"></span>
        Another Action</a></li>
    <li>
      <a href="#">
        <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe088;"></span>
        Something else here</a></li>
    <li class="divider"></li>
    <li>
      <a href="#">
        <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe07c;"></span>
        Separated link</a></li>
  </ul>
</div>
Add User

Input fields

With the same style, we can make cool number input forms
try the arrow keys, the plus and minus keys and buttons
and the mousewheel to increase/decrease the value


<div class="baf-group">
  <a class="baf blue" 
     onmousedown="baf_keepCalling=true; baf_plusone('intinput', 400);" 
     onmouseout="baf_keepCalling=false;" 
     onmouseup="baf_keepCalling=false;">
    <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe094;"></span>
  </a>
  <a class="baf blue" 
     onmousedown="baf_keepCalling=true; baf_minusone('intinput', 400);" 
     onmouseout="baf_keepCalling=false;" 
     onmouseup="baf_keepCalling=false;">
    <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe095;"></span>
  </a>
  <input id="intinput" max="100" min="0" name="quantity" 
         onkeydown="baf_changeValues(this);" 
         type="number" value="42"/>
  <a class="baf blue dropdown-toggle">
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="javascript:$id('intinput').value=0;">0</a></li>
    <li class="divider"></li>
    <li><a href="javascript:$id('intinput').value=25;">25</a></li>
    <li><a href="javascript:$id('intinput').value=50;">50</a></li>
    <li><a href="javascript:$id('intinput').value=75;">75</a></li>
    <li class="divider"></li>
    <li><a href="javascript:$id('intinput').value=100;">100</a></li>
  </ul>
</div>

Input Range fields

you can even make range-style numeric textfields


<div class="baf-group">
  <a class="baf blue" onmousedown="baf_keepCalling=true; 
                                      baf_plusone('rangeinput1', 400, 60, 1);" 
                      onmouseout="baf_keepCalling=false;" 
                      onmouseup="baf_keepCalling=false;">
    <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe094;"></span>
  </a>
  <a class="baf blue" onmousedown="baf_keepCalling=true; 
                                      baf_minusone('rangeinput1', 400, 60, 1);" 
                      onmouseout="baf_keepCalling=false;" 
                      onmouseup="baf_keepCalling=false;">
    <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe095;"></span>
  </a>
  <div class="bafslider baf blue">
    <input name="rangeinput1" id="rangeinput1" max="20" min="0" type="text" 
           title="Range: 0 to 20 in steps of 1" value="10" maxlength="6" onchange="">
  </div>
  <a class="baf blue dropdown-toggle">
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="javascript:$id('rangeinput1').value=5; 
                 fdSlider.updateSlider('rangeinput1');">5</a></li>
    <li class="divider"></li>
    <li><a href="javascript:$id('rangeinput1').value=7; 
                 fdSlider.updateSlider('rangeinput1');">7</a></li>
    <li><a href="javascript:$id('rangeinput1').value=10; 
                 fdSlider.updateSlider('rangeinput1');">10</a></li>
    <li><a href="javascript:$id('rangeinput1').value=13; 
                 fdSlider.updateSlider('rangeinput1');">13</a></li>
    <li class="divider"></li>
    <li><a href="javascript:$id('rangeinput1').value=15; 
                 fdSlider.updateSlider('rangeinput1');">15</a></li>
  </ul>
</div>
<br />
<div class="cente">
<div class="baf-group">
  <a class="baf yellow" onmousedown="baf_keepCalling=true; 
                                        baf_plusone('rangeinput3', 160, 1, 1);" 
                        onmouseout="baf_keepCalling=false;" 
                        onmouseup="baf_keepCalling=false;">
    <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe094;"></span>
  </a>
  <a class="baf yellow" onmousedown="baf_keepCalling=true; 
                                        baf_minusone('rangeinput3', 160, 1, 1);" 
                        onmouseout="baf_keepCalling=false;" 
                        onmouseup="baf_keepCalling=false;">
    <span class="baf-icomoon" aria-hidden="true" data-icon="&#xe095;"></span>
  </a>
  <div class="bafslider baf yellow">
    <input name="rangeinput3" id="rangeinput3" max="360" min="0" type="text" 
           title="Range: 0 to 360 in steps of 1" value="180" maxlength="6" onchange="">
  </div>
</div>
<br />
<div class="baf-group">
  <span class="baf" onclick="$id('rangeinput2box').style.width='200px'; 
                             window.setTimeout(fdSlider.updateSlider, 1000, 'rangeinput2');">
    <span class="baf-icomoon bigger" aria-hidden="true" data-icon="&#xe041;">
      &nbsp;</span> Range Input
  </span>
  <div class="bafslider baf" id="rangeinput2box" style="width:0px;">
    <input name="rangeinput2" id="rangeinput2" max="100" min="0" type="text" 
           title="Range: 0 to 100 in steps of 1" value="50" maxlength="6">
  </div>
  <a class="baf dropdown-toggle">
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="javascript:$id('rangeinput2').value=0; 
                 fdSlider.updateSlider('rangeinput2');">0</a></li>
    <li class="divider"></li>
    <li><a href="javascript:$id('rangeinput2').value=25; 
                 fdSlider.updateSlider('rangeinput2');">25</a></li>
    <li><a href="javascript:$id('rangeinput2').value=50; 
                 fdSlider.updateSlider('rangeinput2');">50</a></li>
    <li><a href="javascript:$id('rangeinput2').value=75; 
                 fdSlider.updateSlider('rangeinput2');">75</a></li>
    <li class="divider"></li>
    <li><a href="javascript:$id('rangeinput2').value=100; 
                 fdSlider.updateSlider('rangeinput2');">100</a></li>
  </ul>
</div>


Range Input

in a form you need more than buttons, you need textfields 


<div class="input-prepend baf-input cente">
  <label class="baf add-on w90" for="inputdefault" id="default">default</label>
  <input class="" id="inputdefault" name="default" size="16" type="text"/>
  <br/>
  <label class="baf black add-on w90" for="inputdefault2" id="default2">default2</label>
  <input class="" id="inputdefault2" name="default2" size="16" type="text"/>
  <br/>
  <label class="baf cyan add-on w90" for="inputfile" id="file">
    <span class="baf-icomoon" aria-hidden="true" 
          data-icon="&#xe081;">&nbsp;</span>file</label>
  <input class="input-cyan" id="inputfile" name="file" size="16" type="text"/>
  <br/>
  <label class="baf blue add-on w90" for="inputemail" id="email">
    <span class="baf-icomoon" aria-hidden="true" 
          data-icon="&#xe02f;">&nbsp;</span>email</label>
  <input class="" id="inputemail" name="email" size="16" type="text"/>
  <br/>
  <label class="baf green add-on w90" for="inputuser" id="user">
    <span class="baf-icomoon" aria-hidden="true" 
          data-icon="&#xe03f;">&nbsp;</span>name</label>
  <input class="input-green" id="inputuser" name="user" size="16" type="text"/>
  <br/>
  <label class="baf yellow add-on w90" for="inputkey" id="key">
    <span class="baf-icomoon" aria-hidden="true" 
          data-icon="&#xe046;">&nbsp;</span>key</label>
  <input class="input-yellow" id="inputkey" name="key" size="16" type="text"/>
  <br/>
  <label class="baf red add-on w90" for="inputwrong" id="wrong">
    <span class="baf-icomoon" aria-hidden="true" 
          data-icon="&#xe08c;">&nbsp;</span>wrong</label>
  <input class="input-red" id="inputwrong" name="wrong" size="16" type="text"/>
  <br/>
</div>

and of course textareas 


<div class="textarea" style="float: left; margin: 20px; width: 190px;">
  <label class="baf add-on w90" for="" id="">one</label>
  <textarea class="" id="" name="" onkeyup="" size="16" type="text"></textarea>
</div>

<div class="textarea" style="float: left; margin: 20px; width: 190px;">
  <label class="baf add-on w90" for="" id="">two</label>
  <textarea class="" id="" name="" onkeyup="" size="16" type="text"></textarea>
</div>

<div class="textarea" style="float: left; margin: 20px; width: 190px;">
  <label class="baf add-on w90" for="" id="">three</label>
  <textarea class="" id="" name="" onkeyup="" size="16" type="text"></textarea>
</div>

<div class="textarea">
  <label class="baf add-on w90" for="defaulttextarea" id="defaultt1">default</label>
  <textarea class="" id="defaulttextarea" name="defaulttextarea" onkeyup="" 
            size="16" type="text"></textarea>
</div>
<br/>

<div class="textarea">
  <label class="baf black add-on w90" for="blacktextarea" id="defaultt2">black</label>
  <textarea class="" id="blacktextarea" name="blacktextarea" onkeyup="" 
            size="16" type="text"/></textarea>
</div>
<br/>

<div class="textarea">
  <label class="baf blue add-on w90" for="blacktextarea" id="defaultt3">blue</label>
  <textarea class="" id="bluetextarea" name="bluetextarea" onkeyup="" 
            size="16" type="text"/></textarea>
</div>
<br/>

<div class="textarea">
  <label class="baf red add-on w90" for="redtextarea" id="defaultt4">red</label>
  <textarea class="" id="redtextarea" name="redtextarea" onkeyup="" 
            size="16" type="text"/></textarea>
</div>
<br/>




Icons for your Buttons and Forms

Buttons and Forms is fully compatible with the Icons from IcoMoon. You can test and configure Buttons with icons with the Buttons Editor or Forms with the Forms Editor.

show compatibility, license and version informations

Browser compatibility

This is being tested in the latest versions of Chrome, Safari, Firefox and Opera.

License

Code (CSS, HTML)

The MIT License (MIT)

Copyright © 2013 Tim O'Donnell, Simon Waldherr

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Images (Icons)

Glyphicons

The following images are provided by glyphicons.com (@glyphicons) and licensed under the Creative Commons Attribution 3.0 Unported License. creativecommons.org/licenses/by/3.0/

More information at:

Icomoon

The following images are provided by icomoon.io (@Keyamoon) and licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. creativecommons.org/licenses/by-sa/3.0/

More information at:

Version

baf v. 2.0.2
11.2013

Acknowledgements

This is a fork of todcs css3-google-buttons.
Inspired by Michael Henriksen’s CSS3 Buttons, Twitter Bootstrap, and of course, Google.
Icons from glyphicons.com and icomoon.io

open the Buttons Editor open the Forms Editor