Button Element

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