Logo
Logo

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.