Image
Stacks add-on

Flat Button

Building beautiful buttons for your sites, whether you're using a pre-built theme or a framework like Foundry, is simple and easy with the Flat Button stack. It allows you a lot of freedom in your design through its versatile selection of settings.

This page outlines the settings included in the Flat Button stack and looks at what they do, and how they affect the its functionality. In addition we have a tutorial and walk-thru video below that helps get you started using the Flat Button stack, as well as gives you an idea what the stack can do before your purchase. For examples of the stack in action, please visit the product page.


Let's look at Flat Button's settings

Below we take a deep dive into what each setting within the Flat Button stack does. This is a good reference for you as you work with the stack, as well as it provides you an inside look at each setting within the stack before you make your purchase.

Image

General

LABEL
This setting allows you to determine if your button will have a label or not. When enabled you're given a field into which to write your button's label text. Disabling the label can allow you to create a button that contains just an icon if you so choose.

BUTTON LINK
Here is where you'll set the link for your button. You can set it to link to another page on your site, aa resource within the RapidWeaver Resources section, or an external site.

ICON
Enabling this feature allows you to include an icon within your button. Iconography can often help with the design of your site. When enabled you'll be given a large drop down of icons to choose from.

Note: When the Icon checkbox is enabled you'll also get alignment controls for the placement of the icon further down in the Alignment section of the settings.

WIDTH MODE
Flat Buton gives you several width modes to choose from. This allows the button to be styled and to function differently depending on your design needs.

  • Standard: Button's width is determined by its contents.
  • Fixed: You're able to specify an exact width for your button.
  • Flexible: Your button will be 100% wide. This means it will fill the available widht of whatever stack it is placed within.
  • Responsive: A marriage of the Standard and Flexible width modes. The button’s width is based off of your label text plus the label padding. At the mobile breakpoint the button switches to being 100% wide, much like Flexible mode.
  • Percentage: Allows you to choose a percentage-based width for your button at each of the three responsive breakpoints.
Image

Alignment

ALIGNMENT
When using a button style that is not 100% wide you can use this setting to align your button to the left, center or right.

ICON ALIGNMENT
If you've enabled the Icon checkbox, in the General settings, this feature will allow you to choose which side of the button you'd like to place your icon on.

Image

Style

ROUNDED CORNERS
Allows you to choose to round the corners of your button, or leave them squared off. You can round all of the corners uniformly or choose a different border radius for each corner.

COLOR MODE
Choose between using a single color picker for a more flat look or opt for using two color pickers to set a gradient for the face of the button, giving it a bit more depth.

BUTTON & ICON COLORS
We provide several color pickers here to set the color of your button's background, text and icon. You're given both normal and hover colors. This allows you to choose how your button appears when the visitor hovers over it with their mouse cursor.

BUTTON HEIGHT
Adjusts the height of your button.

LABEL PADDING
Fine tune the amount of padding around your button's label text.

BORDER
When enabled a 1px border will be added around your button. You'll also be give a color picker to choose the color of the border.

SHADOW
Enabling the shadow checkbox will add a nice drop shadow effect to your button. You're also given controls for adjusting the shadow's size and color.

Image

Font

FONT
You can choose from several standard font type here, or opt for a custom font of your own. The custom font will be provided by yourself, either through a Google font embed, or manually embedding your own fonts. Flat Button does not handle the font embedding itself.

FONT & ICON SIZES
You're able to adjust the font size for your label and icons separately using these two controls.

On this page