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
custom.php file, add this simple boolean filter:
If you’re using a class-based PHP customization controller like I recommend, you’ll want to add that filter to your
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.