Awesome stuff for Beaver BuilderThank you for your patience during our transition to a new server.

HomeModulesBeaver BuilderButton

Button

Part of Beaver Builder Plugin | Works with Beaver Builder Standard / Pro / Agency

The button module adds a button to your layout offering you a way to direct users to an internal or external link.

Buttons are an important visual elements and Beaver Builder provides plenty of ways to style them to suit your layout’s design. Create a pill shape button, an outline or filled button with options to add gradients and icons too. Buttons can be sized by adjusting padding and text size and by choosing a set pixel width or by setting it to fill the entire row. See examples below.

Buttons can be set to ‘no-follow’ which tells search engines not to follow the link specified by the button. You may want to use the ‘no-follow’ function when using the button to direct a user to a login page.


Rate This Module

Rating: 4.0. From 1 vote.
Please wait...

Button

Part of Beaver Builder Plugin| Works with Beaver Builder Standard / Pro / Agency

The button module adds a button to your layout offering you a way to direct users to an internal or external link.

Buttons are an important visual elements and Beaver Builder provides plenty of ways to style them to suit your layout’s design. Create a pill shape button, an outline or filled button with options to add gradients and icons too. Buttons can be sized by adjusting padding and text size and by choosing a set pixel width or by setting it to fill the entire row. See examples below.

Buttons can be set to ‘no-follow’ which tells search engines not to follow the link specified by the button. You may want to use the ‘no-follow’ function when using the button to direct a user to a login page.


Rate This Module

Rating: 4.0. From 1 vote.
Please wait...

Example 1

A standard solid button with a 4x rounded corner. This button has a transition animation that initiates when the user hovers over the button. The button width is set to auto.

Example 2

This is the same button but we've set the width to 200px.

Example 3

A full width button.

Example 4

In this example, we have styled the button with an outline, or transparent setting.

Example 5

Add a border radius to create a pill-type button. We've also included an icon with this button.

Example 6

This example shows a subtle gradient to the button.

Rating: 4.0. From 1 vote.
Please wait...

1 Comment

  1. Mark H on February 3, 2017 at 4:14 am

    How do I get the HTML/CSS to implement the buttons in the above examples?

    3
    3 people like this.
    Please wait...

Leave a Comment