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.
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!
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.
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.
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.
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!
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.
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.
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!
We offer a wide variety of settings that allow you to perfect the look and feel of the buttons.
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.
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.
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:
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: