February 19, 2017

 

Add a transparent button with solid color hover

Author: 

BB

Description: 

This rule will apply to the buttons in both the Button module and Callout module.

To create a transparent button with a solid hover color:

  1. Add a Button or Callout module, or open one for editing.
  2. On the Style tab, set a background color.
    This will become transparent when you apply the CSS, but setting a background color opens the Style section in the editor.
  3. Set the background hover color. In this example, the hover color is black.
  4. Set a dark text color for the transparent button, and a text hover color.
  5. In the Style section, set the Style to Transparent and change the Border size if you want.
  6. Set the Background opacity to 0% and the Background hover opacity to 100%.
  7. Enable the Transition if you want a more gradual change to the solid color.
  8. Click Save.


URL: