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
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!
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!
Example
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.Setup
Follow these instructions to setup one or more ButtonBuilder stacks in your project:- Download and install ButtonBuilder in the normal way.
- On a Stacks page type, open your Stacks Library and search for ButtonBuilder.
- Drag and drop a copy of ButtonBuilder into your page.
- With the stack still selected in edit mode, access its colour and style settings in the Stacks side panel.
- Customise the button link, label text, colours and styling to suit your requirements.
- Preview the page to view the completed button.
- 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.
