Make a button transparent

Build WordPress websites easier with our drag-and-drop page builder.

Visit wpbeaverbuilder.com today!

A transparent button means the button's background color is semitransparent or completely transparent. Especially in the case of a completely transparent background color, there's a border around the button. The hover state can also be solid, transparent, or semi-transparent.

How to create the background color transparency and the border changed in Beaver Builder 2.2. Instructions for earlier releases are included in this article.

Beaver Builder 2.2

Make the button's background color transparent by changing the opacity of the button's Background color setting, using the color picker slider. See the Related Article below about the color picker. Then you can create a button border in the Border section. See the Related Article about the Border section.

Where the background color and border settings are located depends on the module in which the button occurs:

  • In the Button module, the Background color setting and Border section are on the Style tab.
  • In the Callout module, these settings appear on the Link tab when you set Type to Button in the Call to Action section.
  • In the Call to Action module, Contact Form module, and Subscribe Form module, the settings appear on the Button tab.

Prior to Beaver Builder 2.2

Here's how to create a transparent or semi-transparent button. This procedure applies to any module that has a button in earlier releases of Beaver Builder.

To create a transparent button:

  1. Open the module for editing and go to the tab where you can style the button.
    For the Button module, it's the Style tab.
    For the Call to Action, Subscribe Form, and Contact Form modules, it's the Button tab.
    For the Callout module, it's the Call to Action tab and setting Type to Button, which exposes the button style options.
  2. Set a background color for the button.
    When you make the button transparent, this background color will become the button border color.
    Note: Setting a background color is required to expose the transparency selection.
  3. Set a background hover color.
  4. Set text colors for the normal and hover states.
  5. Set the Style to Transparent and adjust the Border size if you want.
    Setting Border size to 0 removes the border.
  6. Adjust the Background opacity and Background hover opacity.
    0% is transparent and 100% is opaque.
  7. Enable the Transition if you want a more gradual change between the normal state and the hover state.
  8. Click Save.