How to Add Hover Color to Buttons in Layers Widgets

How To  Tutorials  Last Updated: Time to Read: 1 minute

This tutorial uses techniques learned in How to Use the Advanced Widget Design Bar Option to Add Custom Styling to Widgets to restyle a Layers Slider Widget button to have a specific hover color and effect.

By default Layers will add a subtle “easing” effect and lighten widget buttons on hover automatically. In cases where you want to change how this looks, you can use Custom CSS or the widget’s Advanced option to add custom styling. This tutorial will focus on using the Advanced option – to get a better understanding of using this option vs. adding “global” styling to the CSS panel in the Customizer or DevKit, review the above linked tutorial first.

To get started, edit your layout in the customizer and add a Slider Widget or expand an existing one to view the Design Bar on the right.

  1. Setup your button using the button controls in the slide options bar. In this tutorial we have a large transparent button with a 3px border and white text that we want to turn white on hover with dark text.
  2. Click the Advanced option
  3. Add a Custom Class name. Choose whatever name is the most semantic for you. Here we use hero , in honor of our Hero Header tutorial which goes great with this one.
  4. Add the following Custom CSS

Line 1: Here we combine our custom class hero  with the button’s class button . Depending how your Slider is configured, you may need to use a more specific selector for the button, such as .button.btn-large . You can reference common class combos here.

Line 2: Using the background  property as the original style does, we set this to a color #FFF which is HEX color shorthand for white. You can grab color codes from any of the option controls that include a color picker.

Line 3: The color  property allows us to set the link text inside the button to something dark that will show up on the white background.

Line 4: opacity  can be used to reset the automatic fading of the button on hover. A value of 1 is full opacity/ no fading.

 

Want more button color control? Check out Layers Pro.

Learn more about Customizing Your Site With CSS