Buttons are practicallly everywhere in web design. The Button stack allows you to create stylish buttons with ease that can link to just about anything, from pages and external sites, to triggering modal popups and more.
Below you'll find a variety of buttons in all shapes and sizes. We've tried to provide a good variety of buttons using this tool, but really the variations are nearly endless.
Here we have a series of standard sized buttons. We've varied their appearance using different color settings, shadows, varying their border radius and more.
Many times we want to have buttons take up the full-wdith of their parent container. For this we use Block style buttons in Foundry. The Block feature, which is what makes the button go full-width, can be toggled on or off at each of the 6 responsive breakpoints. Below we've created a few block buttons in various shapes and size.
These examples are just scratching ther surface. There's so many combinations of color, size, animation, shadow and more that you can choose from to set your buttons apart and garner your visitor's attention!
One goal of Foundry is to add a little depth back into websites. We've included a series of preset shadow ooptions throughout all of our tools, as well as made custom shadows as well as a customizable preset in the Control Center. A great place to apply these shadows are on our site's buttons.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
This is where you'll insert your text that will appear on your button. Leave it blank if you'd like to use a button with only an icon.
Allows you to provide a link to a URL, whether it be an internal page or an external link. When using a button to trigger a Foundry Modal be sure to leave the link blank.
When enabled you can add an ARIA label for accessibility to your button.
When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.
Here we can define the font for this tool. You can choose to use one of the fonts defined in the Typeface tool or simply use the Base Font that is defined in the Foundry Control Center.
Allows you to adjust the font weight for your text. This setting goes from 100 to 900 in increments of 100. Standard Normal font weight is 400 and Bold font weight is generally 700.
The Button tool offers several different style modes to choose from. Below we look at each of the style modes and what they have to offer:
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You're also provided a color picker for setting the text color.
The Button will be shown in a way the mimics a standard link on the page. It will take on the link styling provided in the Control Center.
Provides color pickers for styling the Button's background, border and text colors, as well as providing alternate colors for each of these for when the visitor hovers over the button.
We provide two different gradient style options. In the Two Color Gradient setting you're given color pickers for the gradient's two colors as well as the button border and text. Much like the Custom Styling option you can also adjust the styling for the hovered button as well. You've also got control over the angle of the gradient.
Much the same as the Two Color gradient option, but with the added ability to choose four colors as well as choose the color position along the gradient for each of the four colors. Again, you have control over the text and border, along with the gradient angle, and can adjust the gradient's colors for when it is hovered over by visitors.
Outline Mode can be used when working with the Preset styling mode. This basically inverses the colors and uses a tranparent background color. This is yet another way to provide variety in your page and button designs.
When using Preset mode for your Button's style we can set the opacity of the button when the visitor hover over it. When using other modes like Custom Styling and gradients you can set separate hover styling instead of using the Opacity hover feature.
We provide a quick way to add a subtle light gradient over our buttons when using Preset or Custom Styling modes. This simply includes a translucent white gradient over the button to give it a bit more depth.
Here you can adjust the size of the button using the 3 preset choices. You can opt for a small, standard or large button, with the default being Standard.
Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.
When you want to have a button take up the full-wdith of its parent container you can use the block button feature. This setting can be toggled on or off at each of the 6 responsive breakpoints. This is handy for setting a block button for mobile at the Small and Extra Small breakpoints.
When enabled this will make the button un-clickable and apply a disabled style to it.
This setting allows you to align the button to the left, center or right of its parent container. In Uniform mode this alignment will be set the same for all 6 breakpoints.
Clicking on the small plus icon will give you the ability to adjust the alignment of the button independently at each of the 6 responsive breakpoints giving you more granular control.
Used to add a decorative shadow to the button. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
This setting can be used to apply a different shadow, or none at all, to a button when the visitor hovers over the button on the page.
When enabled a small transition animation, essentially a keyframe animation, will be applied to the button when the visitor hover over it. This will give the transistion from normal Shadow style to Hover Shadow style a bit more personality and visual interest.
Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. By choosing one you're then given the ability to then choose one of the preset icon choices or choose Custom and type in the unique identifier for the icon you'd like to use. The font identifiers can be found on the Bootstrap and Font Awesome sites.
By default the Icon Library setting is set to None, which disables the icon.
Allows you to choose which side of the button's text you wish to place the icon. You can choose from left, right or place the icon in a floating badge on the top right corner of the button.
When using the Badge setting you'll also be provided settings for styling the background and icon color as well as a shadow for the badge. You'll be able to choose from using a preset color palette option for the background or custom color picker.
The Button tool provides a few unique animations that can be applied directly to the button itself, allowing it to pulse continously to draw attention, or when hovered over for interactivity. This is off by default.
Note that the button also works well with Foundry's animation stack, Alchemy, as well.
Used to delay the the animation's start. Since this is a looping animation it inserts a delay before each start of the loop.
Controls the length of your animation. You can also think of the Duration setting as a sort of Speed setting. The larger the value here the longer the animation runs, which also translates to a slower animation. A shorter value will result in a quicker, faster animation.
This feature allows us to use a button to trigger the opening of the Foundry Modal. This allows us to decouple the Modal from its trigger, which in this case is our Button, which gives us much greater control over our page's design and layout.
The Unique Modal ID you enter here should match the Unique ID you've setup in the Modal tool's settings. This allows the Button to know which Modal to terigger when your visitor clicks it. This ID links the two page elements together.
Here we can choose between having a simple Tooltip or a more advanced Popover added to our Button. These elements appear when the visitor hovers over the Button. By default we have the Type set to None, which turns off this feature.
Be sure that you've enabled Tooltips and Popovers in the Control Center's "Additional Elements" section. Doing this loads the appropriate javascript for these items. Not loading this javascript by default saves us from loading code on the page that we may not need.
If you're using some custom javascript on your page that requires your Button to contain a custom DATA tag, you can use this feature to add the data tag as well as the tag's contents.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Allows you to specify an options class, or classes, that will be added to this tool's child item. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.