Whether you're looking for a classic, flat design or something with a bit more depth, look no further

The Flat Button stack gives you the power to build beautiful buttons for all of your sites, whether you're using a pre-built theme or a framework like Foundry. This stack gives you a lot of different settings for customizing the look and feel to match your site and meet your needs.

Quick look

Before we check out the sample buttons, let's have a look at some of the highlights of what Flat Button 2 can do for us when creating our web pages.

Image

Classic

Build classic buttons with a flat styling. These buttons will look right at home on your pages for years to come.

Image

Stand Out

Flat Button 2 allows you to add depth to your buttons using gradients and drop shadows to help your buttons stand out.

Image

Iconic

Use icons, the universal language, to help your buttons pop. You can choose from over 300 different FontAwesome icons.

Supersize

Choose the size of your button by setting a custom height. You can also adjust the padding on the left- and right-hand side of your button label for both the Standard and Responsive width modes.

Image

Well Rounded

Choose to round the corners of your button, or leave them squared off. You can round all of the corners the same or choose a different border radius for each corner.

Image

Alignment

The Flat Button stack allows you to align your button to the left, center or right. You can also choose to place your optional icon on either the left- or right-hand side of the button.

Image

Versatile

Choose from 5 different width modes to get the right setup for your buttons, no matter your page’s design.

Image

Border

Add a border to your button for another style. Adjust the border’s color to match your design.

Image

Lone Icon

Choose to disable the button’s label and you can have a button that consists of an icon alone.

Image

Fonts

Pick a font from our list of web safe fonts, or chose Custom to specify your own label font.

Samples

See what's possible

Below we’ve built several different examples so you can get a quick idea of what the Flat Button 2 stack is capable of creating. These are just a few of the many designs you can create!

The Basics

Created using the default stylings of the Flat Button stack, without an icon. We're using the Responsive width setting so we get a basic button display on the desktop and full width buttons at the mobile breakpoint.


Iconic

Flat Button 2 allows you to add an icon to your button, placing it on either the left- or right-hand side of the button. There are over 300 different icons to choose from include in the stack. You can size and color the icon independent of the main button area.


Adding Depth

We’ve added some depth to Flat Button 2! You can now create gradient buttons as well as add nice drop shadows that help separate your buttons and make them really pop. You can fine tune both gradients for both their normal state as well as for the hover state.


Borders

Build buttons with borders. Beautiful borders. Combine them with solid colors, gradients, or no color whatsoever. You can build a wide variety of different looks just by adding a border to your button!


Picturesque

With Flat Button 2 you can opt to forego the text label and use just an icon. This makes for nice, standalone buttons with the universal language of iconography. We’ve used the Standard width mode for these standalone icon buttons.


Size Matters

With the Flat Button 2 stack you can choose the height of your button, which impacts the overall size of your button and its icon, if you’re using one. In the Standard and Responsive modes you can choose too add a little extra padding to the sides of your button label as well.


Smorgasbord

Below we’ve created several additional buttons for you to check out, all using different style settings found in the Flat Button stack. Flat Button 2 includes a plethora of features that will help you to get a button that is just right for your project. We look forward to seeing what button designs you cook up!

Customizable

We offer a wide variety of settings that allow you to perfect the look and feel of the buttons.

Documentation

What does this setting do?

In addition to the tutorial walk through video, toward the top of the page, we also offer detailed documentation for each setting within the Flat Button stack to help you in building your site and making the decision to purchase this stack.

You can find the full documentation and tutorials for Flat Button, as well as all of our other products in the Elixir Support Hub.


Requirements

What will you need?

While Flat Button is pretty straight forward, we do use some tools in the Stacks API to load icons and other tools needed for features in this stack. Let's look at the required software as well as the browser support for this stack.

What you need

As mentioned, we use the latest Stacks API for Flat Button 2 to help facilitate the functionality of the stack. You'll need the following tools to make use of Flat Button for your site:

  • RapidWeaver v8 or newer
  • Stacks v4 or newer
Browser support

This stack is designed with modern browsers in mind to give your visitors the best experience possible. Flat Button will work nicely in the most recent versions of these browsers:

  • Safari
  • Firefox
  • Chrome
  • Edge
elixir

THE FORGE. Stay up to date on future versions of Elixir products, as well as important news, updates and more through our newsletter.

Re-Download Purchases

Use your email address to look up your previous orders and retrieve download links.


© 2006-2021 Elixir Graphics

RapidWeaver is a Registered Trademark of
Realmac Software Limited