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.
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