• Say hello to the new Flat Button 2 stack for RapidWeaver

Time to read: 2 minutes

While the Flat Button stack has been one of our most popular stacks since its original release, we felt it still had room to grow. So while development of Foundry was winding down I started planning for a totally revamped version of this classic stack.

With Flat Button 2 I decided to start anew, re-writing the stack from the ground up. My goal was to not only add in several new features, as well as make the old ones more customizable, but to also optimize the stack in Edit Mode, making it feel more lightweight.

Flat Button’s revamping has brought about a ton of new features. The current trend in web design is to add back in a little bit of depth to site designs. Subtle gradients, drop shadows, etc. So while we’ve kept the ability to build timeless looking flat style buttons, we’ve also added in gradient controls, borders, drop and drop shadows to help give that touch of depth to your buttons.

We’ve also tweaked the font handling to allow you to use one of the built-in web safe fonts or to specify your own font name if you’re using Google Fonts on your pages. In addition to custom fonts we’ve added in the ability to choose from a wider variety of icons for your buttons, as well as to place your icon on either side of your button. Don’t need a label at all? You can now also have a button that consists of an icon only.

These are just a few of the new features though. Have a look over the live preview site or the product page, and have a watch through our overview video below to get a feel for the new Flat Button 2 stack.

Overview Video

New & Improved

Here’s a look at the new and improved features in Flat Button 2 stack:

  • Ability to hide label and show only an icon.
  • Option to place icon on the left- or right-hand side of button.
  • New percentage based width mode.
  • Round button corners uniformly, or on an individual basis.
  • Choose between a flat or gradient style button.
  • Set normal and hover colors independently for button and icon sections as well as text and icon. Applies to gradients as well.
  • Set custom button height.
  • Add padding to button label for Standard and Responsive width modes.
  • Add and customize a border for your button.
  • Add a stylish drop shadow to your button and customize the shadow color.
  • Use either a web safe font or your own custom font.
  • Set the label and icon sizes independent of one another.
  • Optimized to increase speed in Edit Mode.