Make a button transparent

Here's how to create a transparent or semi-transparent button. The hover state can also be solid, transparent, or semi-transparent.

This procedure applies to any module that has a button, as described in the procedure below.

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.