How to Customize the Call to Action Button in Hydra

Customizing the Buttons used on your website is easy when you have the Post and Page Builder installed, but some buttons are slightly more difficult to customize when they are not part of you page content and reside in other locations.  Buttons in your Call to Action (CTA) widget are one such example.

Post and Page Builder controls do not work when modifying content in widget areas so the best tool to customize your CTA button is custom CSS added through your website’s Customizer.

The default  button in the CTA widget uses the button-primary class and this class along with some classes directly associated with the CTA will be used in our CSS rules to target the button specifically.

This is the selector combination that we will use to target out CTA button:

.palette-primary .call-to-action-wrapper .button-primary {

}

Now that we have our selectors in place we can start adding design rules, one per line, between the two braces.  There are many customization options available and typically you will want to change the text color, background, border radius, and button padding.

This code will change the CTA button to have white text on a blue background with 15 pixels of padding surrounding the text and slightly rounded corners.  Increasing/decreasing the padding value will change the size of the button and changing the border-radius value will change the roundness of the button corners.

.palette-primary .call-to-action-wrapper .button-primary {
color: white;
background-color: blue;
padding: 15px;
border-radius: 5px;
}

These are just a few of the rules that you can add there are plenty of additional rules that you can add to further customize your button designs.