Button Element

Updated 7 months ago

Button element is an interactive element with a predefined hover state. It is available in:

• Live Builder;
• WPBakery Page Builder;
• Header Builder;
• Grid Layout Builder.

Check Button examples

General settings #

• Button Label — change the button text
• Link — select a predefined value from the following:
  • None – the button is not clickable but still has a hover state.
  • To a Post – used in Grid Layouts to open relevant posts in a Grid.
  • Clickable value (email, phone, website) – uses the button label as a link:
    
    • "email@test.com" adds the "mailto:email@test.com"
    • "1234567890" adds the "tel:1234567890"
    • "website.com" adds the "website.com"
  • Onclick JavaScript action – allows you to run a custom script by clicking on a button. Shows the field for a custom javascript value
  • Custom appearance in Grid: Custom Link – uses the value from the relevant custom field
  • Testimonial: Author Link – uses the value from the relevant custom field
  • Custom – shows the relevant field for a custom value
• Style — select a button style. Button Style is a combination of visual properties, which is used globally on a website. You can add or edit button styles on Theme Options > Button Styles. You're able to override any style property in the Design tab of the element settings.
• Size — set size with CSS units
• Size on Mobiles — set size with CSS units. It will be applied on the Mobiles screen width and below
• Stretch to the full width — make a full-width button
• Button Alignment — select an alignment. The Default alignment means the Left on LTR languages and the Right on RTL languages. Also, the Default alignment allows placing several buttons side by side in a row.
• Icon — set an icon near the button label
• Icon Position — select the icon position

Hover Effect #

ON/OFF slider in Grid Layout Builder allows adding effects:

• Opacity
• Opacity on Hover
• Scale
• Scale on Hover
• Horizontal Shift
• Horizontal Shift on Hover
• Vertical Shift
• Vertical Shift on Hover
• Background Сolor on Hover
• Border Сolor on Hover
• Text Сolor on Hover
• Hover Transition Duration
• Transform origin X
• Transform origin Y parameters

Design settings #

All Design settings are the same for all elements. Read the article.

How to place several buttons in a single line #

• Select Horizontal Wrapper Element

• Horizontal Wrapper Setting — set "Left"
• Gap between Items — set custom value (default is 1.2rem)
• Add buttons to the horizontal wrapper

Result