How to Use Advanced Button Pro in BricksFly

Advanced Button Pro gives you more control over button design in BricksFly. From hover styles and icon placement to links and alignment, you can customize the button to fit your website design.

Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Advanced Button Pro In BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly. 
3. Head to the Elements tab. 
4. Under General, toggle on Advanced Button Pro.

Step 1: Add the Advanced Button Pro Element

Click the + icon and use the search bar to find Advanced Button Pro. Once the element appears, select it to add it to the page.

Step 2: Choose and Preview Button Styles

Choose a button style from the available options and preview how each style appears before applying it to your design.

Style

Default: Displays the button with the standard button style. Default style lets you customize the Hover Background and Reveal Color based on your design needs.

Default Style Preview:

Square: Displays the button in a sharp, square-shaped style. Similar to the Default style, this option lets you customize the Hover Background and Reveal Color based on your design needs.

Square Style Preview:

Underline: Adds an underline-style hover effect to the button text.

Underline Style Preview:

Mask: Creates a masked animation effect where the button content reveals or changes on hover.

Mask Style Preview:

Oval: Displays the button with an oval-shaped design.

Oval Style Preview:

Circle: Displays the button in a circular shape.

Circle Style Preview:

Ellipse: Displays the button with a wider rounded shape, similar to an extended circle.

Ellipse Style Preview:

Border Divide: Adds a divided border-style effect to the button for a more dynamic hover interaction.

Border Divide Style Preview:

Shadow Offset: Adds an offset shadow effect to create depth around the button.

Shadow Offset Style Preview:

Text Flip: Adds a text-flipping animation when users hover over the button.

Text Flip Style Preview:

Radial Reveal: Reveals the button background or hover effect from a circular direction.

Radial Reveal Style Preview:

Icon Swap L ➜ R: Swaps or moves the icon from left to right on hover.

Icon Swap L ➜ R Style Preview:

Icon Swap R ➜ L: Swaps or moves the icon from right to left on hover.

Icon Swap R ➜ L Style Preview:

Outline Pill: Displays the button as a rounded pill shape with an outline style.

Outline Pill Style Preview:

Slide Reveal: Adds a sliding reveal animation to the button on hover.

Slide Reveal Style Preview:

For this example, the Underline style is applied. Other styles can also be selected based on your layout and design needs.

Step 3: Configure Button Content and Layout

Set the button text, icon, link, and alignment to match the content and layout of your design.

Text

Allows you to add or edit the button text displayed inside the Advanced Button Pro Element. In this example, Get Started Now is used as the button text. You can enter any text based on your design needs.

Icon

Allows you to add an icon to the button for better visual appearance and interaction. For this example, Arrow SVG is selected.

Icon position

Controls where the icon appears, such as before or after the button text. In this example, After is selected.

Link

Allows you to add a URL or dynamic link to the button. The available options include:

Internal Post/Page: Links the wrapper to an existing post or page on your website.

Taxonomy (Term): Links the wrapper to a taxonomy archive, such as a category, tag, or custom taxonomy term.

Dynamic Data: Uses dynamic link data from Bricks, such as post URLs, author URLs, or other available dynamic sources.

Custom URL: Lets you manually add any URL, such as an external website link or social media link.

Media: Links the wrapper to a file from the WordPress Media Library.

Lightbox Image: Opens the selected image in a lightbox popup when users click the wrapper.

Lightbox Video: Opens the selected video in a lightbox popup when users click the wrapper.

In this example, no link is added.

Alignment

Start: Aligns the button to the start of the container, usually the left side in a standard layout.

Center: Aligns the button to the center of the container.

End: Aligns the button to the end of the container, usually the right side in a standard layout.

Auto: Uses the default alignment behavior based on the Element layout and container settings.

In this example, it is left unchanged. However, you can choose any option you prefer.