How to Enable The Button Class in Your CSS

Focus provides button styles for <input type="submit" /> and <button> elements. (And of course, you can control the appearance of these elements in the Design Options.)

But what if you want to turn a simple link into a button by applying some classes? Maybe something like this:

<a class="button action" href="/whatever/">See Pricing</a>

Out of the box, that won’t work because the button class is not defined in the default CSS. The reason? Unintentional style conflicts with certain ecommerce Plugins and Page Builders.

Here’s how you can turn on flexible button classes: In your master.php or custom.php file, add this simple boolean filter:

add_filter('focus-css-add-button', '__return_true');

If you’re using a class-based PHP customization controller like I recommend, you’ll want to add that filter to your __construct() method.

Once you’ve successfully added the filter, you need to save your CSS one time to add the button class to your stylesheet. The quickest way to do this is either to save the Design Options or else just hit save on the Custom CSS page.