Open Source HTML Buttons

Quickly add HTML / CSS buttons to your web project

HTML Buttons is an open source toolkit for adding buttons to any website. Made with pure HTML and CSS, it's fast, lean and simple to use.

Create a Button 
<div class="html_button btn-center">
    <button onclick="alert('cool huh?');" class="btn blueLagoon large icon-after star">Awesome Button</button>
</div>

Easier Button Implementation

Ready Made Buttons

  1. Install the base CSS
  2. Choose a ready made button design
  3. Customise alignment, size, icons & tag

Make & Save Your Own

  1. Design buttons using the Button Generator
  2. Save button designs to your profile
  3. Customise & add to your projects fast

Add Icons Inline

Add icons to your buttons in one click or by adding simple CSS classes.

Icon SVGs are embedded in the CSS making them extremely fast without dependency.

Place your icons before or after the button's text. Icons adopt the font color value.

Toggle Icons create options for 'status' buttons such as 'like', 'heart' or simply 'on/off'. These can fire javascript functions as necessary.

Award Icon
Star Icon

A Button Design Palette

Web projects often call for buttons of different sizes, alignments and content. Designing all the variants takes time.

Use HTML Buttons to create button styles that you can implement consistently through your project. It's easy to choose a different button size, alignment, icon or html tag and the button's design style never breaks.

We've designed a palette of button styles that you can use, free, on any web project including commercial.

Example Button Styles

Seville
Spruce
Forest

HTML Button Design Framework

Sometimes buttons are <a> tags, sometimes <buttons>. HTML Buttons supports the use of buttons as anchor, button, checkbox and radio input HTML tags.

A button can be a straight-forward link using an anchor tag or fire a javascript function with a button tag. Checkbox and Radio inputs can be used in forms or alongside CSS pseudo classes such as ::checked.

Anchor Tag <a></a>

Use anchor tag buttons for links.

<div class="html_button btn-left">
    <a href="#" class="btn">Your button text here</a>
</div>

Button Tag <button></button>

Use button tag buttons for initialising javascript functions.

<div class="html_button btn-left">
    <button type="button" onclick="yourFunction()" class="btn">Your button text here</button>
</div>

Checkbox and Label Tag <label></label>

Clicking the label button checks the checkbox. The checkbox can be used as a checkbox or hidden and used with the ::checked pseudo-element.

<div class="html_button btn-left">
    <label class="btn" for="check">Your button text here</label>
    <input name="check" id="check" type="checkbox">
</div>

Radio Buttons and Label Tag <label></label>

Create label buttons that select radio inputs. The radio inputs can be used as radio inputs or hidden and used with the ::checked pseudo-element.

<div class="html_button btn-left">
    <label class="btn" for="radioA">Your button text here</label>
    <input name="radio" id="radioA" type="radio">
</div>
<div class="html_button btn-left">
    <label class="btn" for="radioB">Your button text here</label>
    <input name="radio" id="radioB" type="radio">
</div>

Toggle Icon Buttons

Toggle icons use a <label> and checkbox with the ::checked pseudo-element to toggle the icon on or off.

<div class="html_button btn-center sound-on-off">
    <input name="toggle-example" id="toggle-example" type="checkbox" style="display:none;">
    <label class="btn icon-before sound-toggle" for="toggle-example">Your button text here</label>
</div>

For more help with implementation check out the docs.