Buttons in Global Styling

The Buttons section in Global Styling lets you create reusable button style presets that can be applied to Button widgets throughout your website.

Instead of styling every button individually, you can create central presets for different types of buttons – for example a primary call-to-action and a secondary button – and reuse them across pages, funnels, popups, Circles, and other areas where the Button widget is available.

Each preset can also have separate desktop and mobile styling, giving you control over how buttons look and behave on different screen sizes.

To open the settings, go to:

Web Studio  > Global Styling > Buttons

Button presets

At the top of the Buttons settings, use the Preset dropdown to select the button style you want to edit.

You can have multiple presets, for example:

  • Standard
  • Primary button
  • Secondary button
  • Book a call
  • Buy now

The preset names are entirely up to you, so you can create a button system that matches how you actually use buttons across your site.

Edit an existing preset

Select the preset from the Preset dropdown and adjust its styling.

The preview updates as you make changes so you can see how the button will look before confirming.

Create a new preset

To create a new reusable style:

  1. Enter a name under New Preset Name
  2. Configure the button styling
  3. Click Create New Preset
  4. Click Confirm when you're finished

Use descriptive names that make the purpose of the button clear.

For example:

  • Primary CTA
  • Secondary CTA
  • Book now
  • Download
  • Light button

Delete a preset

Select the preset you want to remove and click Delete Preset.

Be careful when removing presets that may already be used throughout your site.

💡 Tip

Build a small, intentional button system instead of creating a new preset for every page. In most cases, a primary, secondary, and perhaps one special-purpose button style is enough.

Desktop and mobile styling

Each button preset can have separate settings for desktop and mobile.

Use the device icons above the styling controls to switch between:

  • Desktop
  • Mobile

This lets you adjust the same preset differently for smaller screens.

For example, you might:

  • Use less padding on mobile
  • Reduce the font size
  • Make the button full width
  • Change alignment

💡 Tip

Always check both device views before saving a preset. A button that looks balanced on desktop may feel too large or too small on mobile.

Colors

Button Color

Controls the main background color of the button.

Use your Global Colors whenever possible to keep the button consistent with the rest of your design.

Border Color

Controls the color of the button border.

This is particularly useful for outlined or secondary button styles.

Add Gradient

Enable Add Gradient if you want the button background to use a gradient instead of a single color.

Use gradients intentionally – especially for primary calls-to-action – rather than applying different gradients throughout the site.

Text Style

Select Change under Text Style to customize the typography used inside the button.

Use this to control the appearance of the button text while keeping the setting part of the reusable preset.

💡 Tip

Keep button typography consistent across your design system. Buttons should feel like the same component even when their colors or purpose differ.

Shadow

Select Change under Shadow to add or customize a shadow around the button.

Shadows can help a button stand out from the surrounding content, but they are usually most effective when used subtly.

Size and shape

Padding Size

Controls the space around the button text.

More padding creates a larger, more prominent button.

Less padding creates a more compact button.

Border Radius

Controls how rounded the corners of the button are.

  • Lower values create sharper corners
  • Higher values create more rounded buttons

Border Size

Controls the thickness of the button border.

Set a larger value for a more prominent outlined style.

Full-width buttons

Enable Expand button to full width to make the button fill the available width of its container.

This can be particularly useful for:

  • Mobile layouts
  • Forms
  • Checkout-style actions
  • Narrow columns
  • Prominent calls-to-action

Because desktop and mobile settings are separate, you can make a button full width on mobile while keeping its natural width on desktop.

Button Alignment

Use Button Alignment to control where the button sits inside its available space.

Available options:

  • Left
  • Center
  • Right

Choose the alignment based on the layout surrounding the button rather than styling buttons independently from the rest of the section.

Hover effects

The Hover effect setting controls what happens when a visitor places the cursor over the button.

Available effects are grouped into several types.

None

Choose NONE if you do not want an additional hover animation.

2D Transitions

Available effects include:

  • Grow
  • Pop

These add movement to the button itself when hovered.

Background Transitions

Available effects include:

  • Fade in
  • Slide color to the right
  • Fill with color

These animate the button's background treatment.

Shadows

Available effects include:

  • Grow + Shadow
  • Float up + Shadow

These combine movement with a shadow effect to create more depth.

💡 Tip

A small hover effect can make buttons feel more interactive, but avoid using noticeably different effects for every button. Consistency usually creates a more polished experience.

Using a preset in a Button widget

Once a preset has been created, it can be selected inside the Button widget.

This lets you reuse the same button styles across:

  • Website pages
  • Funnel pages
  • Popups
  • Circles
  • Other areas where Button widgets are available

Using presets means you don't need to manually recreate the same colors, spacing, border radius, and effects every time you add a button.

Best practices

  • Create a small set of reusable button styles
  • Give presets clear, purpose-based names
  • Use one primary style consistently for your most important actions
  • Use a secondary style for lower-priority actions
  • Use Global Colors where possible
  • Check both desktop and mobile settings
  • Keep padding and font sizes comfortable on touch devices
  • Avoid excessive shadows, gradients, or hover effects
  • Use full-width mobile buttons when it improves usability
  • Apply presets instead of manually restyling individual buttons

💡 Tip

Think of your button presets as part of your website's design system. The goal is not to create as many styles as possible – it is to make the right styles easy to reuse everywhere.

Summary

  • Buttons in Global Styling lets you create reusable button presets
  • Select an existing preset or create your own
  • Each preset can have separate desktop and mobile styling
  • Control button and border colors
  • Add optional gradients
  • Customize text styling and shadows
  • Adjust padding, border radius, and border size
  • Make buttons full width when needed
  • Choose left, center, or right alignment
  • Add hover effects such as Grow, Pop, background transitions, or shadow effects
  • Apply your presets inside Button widgets throughout the platform

Used consistently, button presets make your site faster to build, easier to maintain, and more visually cohesive.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.