Global Button Settings

Introduction to Global Button Settings in Breakdance

In this guide, we will explore how to utilize the global button settings in Breakdance. This feature allows you to set universal styles for primary and secondary buttons across your website, ensuring consistency and ease of design.

You will find global button settings in the ‘…’ menu at the top right of the builder interface, under Global Settings > Buttons.

Setting Up Button Styles

Once you’ve located the global button settings, it’s time to customize the Primary and Secondary button styles for use in your designs.

Configuring Primary Button Styles

The Primary button styles are intended to be used for buttons that should be attention grabbing and prominently featured. This may include things like call to action buttons and more.

To access Primary button styles, click the edit icon next to the ‘Primary’ control in the Buttons section of the Global Settings area.

Once there, you’ll find a number of controls to completely customize the way Primary buttons look on your site, including:

• Size
• Background
• Outline (on/off)
• Outline Color
• Outline Width
• Fill On Hover (on/off)
• Typography
• Corners (choose from Square, Round, or Custom)
• Effects (set up transition duration, scale, on hover, and shadows)
• Icon (add and customize an icon for Primary buttons)

Configuring Secondary Button Styles

The Secondary button styles are intended to be used for buttons that are not the main call to action on the site. Often they are paired with a Primary-style button and are associated with a secondary action that you’d like users to take.

To access Secondary button styles, click the edit icon next to the ‘Secondary’ control in the Buttons section of the Global Setting sarea.

The Secondary button style options are identical to the Primary button style options.

Customizing Button Typography

Note that both Primary and Secondary buttons have full-featured typographical settings within their styling options. This means you can set the font family, font size, font color, and more using custom settings or a Typography preset.

Applying Global Styles Across the Site

Once your global button styles are set up, they will automatically apply to all Primary and Secondary buttons across your site. This saves tons of time in creating your designs and ensures a consistent look for these important interactive elements.

Button Presets

Button Presets allow you to create reusable button styles that stay consistent across your entire site. They bring the same power and flexibility of Global Styles to buttons inside Breakdance’s most commonly used elements — including Buttons, Pricing Tables, Fancy Testimonials, Icon Boxes, and Image Boxes.

With Button Presets, you can design a button once and reuse it anywhere, ensuring consistent typography, colors, borders, effects, and responsive styles across all breakpoints.

Creating a Preset

There are two ways to create a Button Preset: from the Global Settings panel, or directly while working with an element that contains a button.

From Global Settings

1. Open the Settings Menu.
2. Navigate to Global Settings > Buttons > Presets.
3. Click Add Preset.
4. Name your preset (e.g., Primary CTA).
5. Define the properties for the Preset.
6. Your preset is now available for use across all elements that include buttons.

From an Element

1. Select any element that contains a button (e.g., Button, Icon Box, Image Box, Pricing Table, Fancy Testimonial).
2. Go to Style > Custom > Presets.
3. Adjust the button’s design as desired.
4. Click Save as Preset to create a new reusable preset.

Applying Presets

Applying a Button Preset is fast and intuitive from the Properties Panel.

1. Select the element containing a button.
2. Go to Style > Custom > Presets.
3. Open the Presets dropdown.
4. Choose a Preset from the dropdown or begin typing in a Preset name and suggestions will appear automatically.

Modifying a Preset

You can modify any Preset by going to Global Settings > Buttons > Presets, or by clicking “Manage Presets” when working in the Button Style Section of an element.

After you make your changes, all elements using that Preset will update automatically across your site.