Many free and paid button stacks already exist. But all too often, people can quickly hit frustrating limits with what they can do with them. Or to their horror, they discover completed buttons don't work correctly in certain web browsers or for disabled website users. Buttons are a critical part of the user interface, and it's of paramount importance you get things right the first time!

ButtonBuilder is generously provided as a free stack (donations are encouraged) in the hope that you can chuck-away all your old and obsolete button stacks, and settle into building better buttons with ButtonBuilder! A clean user interface greets you, laying out all the most important colour and style settings you are likely to need. You have the freedom to use your own preferred units of measurement for all sizing, to keep things consistent with your existing theme or framework.

To improve accessibility, buttons change colour between their static, hovered and active (pressed) states. An outline focus can be applied, so that when a button receives focus via the keyboard tab key, the user can hit return to 'click' it. Plus you can add any custom attributes of your choosing to the button; for instances when you need to do things like apply title tooltips, HTML data- attributes or Javascript events. So there's plenty in here for experts too.

The bottomline is this; ButtonBuilder fixes a lot of the irritations we have often run into when using other button stacks. This is the button stack that should have shipped with the Stacks plugin!


This is a single example of ButtonBuilder, using the default settings. There are thousands of possible colour and style combinations you can mix to create your very own button designs. Too many possible combinations to start showing here.


Follow these instructions to setup one or more ButtonBuilder stacks in your project:
  1. Download and install ButtonBuilder in the normal way.
  2. On a Stacks page type, open your Stacks Library and search for ButtonBuilder.
  3. Drag and drop a copy of ButtonBuilder into your page.
  4. With the stack still selected in edit mode, access its colour and style settings in the Stacks side panel.
  5. Customise the button link, label text, colours and styling to suit your requirements.
  6. Preview the page to view the completed button.
  7. Save your changes. Export or publish your website in the normal way.

All settings in ButtonBuilder display informational tooltips on mouseover. These help tell you what each setting does and may include some important details to follow. For example, many of the number inputs let you define your own units of measurement (e.g. px, rem, em, %, vw, or vh) depending on what you prefer using or what you're most familiar with.

Icons are supported in the buttons. The easiest way to accomplish this is to use a popular icon library like Font Awesome Icons. If you're already a user of ThemeFlood themes, then Font Awesome Icons are often already included for you. Just copy and paste the HTML code for the desired icon into the button label box.

Viewing the source code

An innovative feature of this button stack is the ability to view the source code of each generated button. This lets you use the same button in non-Stacks pages (like Styled Text, Markdown or the RapidWeaver Blog) and its even possible to use the same code in websites not made with RapidWeaver! To do so, simply enable the View Source Code option in the stack settings. When you preview the page, you will be presented with the generated CSS and HTML code, for your button.