Using WordPress? See this page for details on how to install and use the buttons stylesheet with a WordPress site.
The FareHarbor buttons stylesheet makes it easy to add dynamic, interactive buttons to your website. In contrast to plain text links, buttons provide a clear call to action on a webpage, resulting in more clicks and more bookings.
These buttons are clear with a colored outline. For outline buttons, use class="fh-button-outline".
You can customize the color of your buttons by adding “colorname” classes. To do this, append the query parameter colorname=HEX to the stylesheet URL, replacing ‘HEX’ with an HTML hex color value. For example, adding red=ff0000) generates the class fh-button-red.
You can append as many unique colornames as you wish, separated by an ampersand (&). In the below code, both fh-button-red and fh-button-orange are generated:
<!-- FareHarbor buttons stylesheet -- do not remove -->
<link rel="stylesheet" href="https://fh-kit.com/buttons/v2/?red=ff0000&orange=ff8c1a" type="text/css" media="screen" />
Example: <a href="#" class="fh-button-red">Book Now</a> generates the following button:
You can also use the below modifier classes to customize your buttons. When using these modifiers with the v2 buttons stylesheet, you only need to declare the button type at the beginning of the string.
Example: class="fh-button-2d fh-icon--map"
Tip: Use our interactive FH Kit page to easily generate custom classes for your buttons. Use the dropdowns at the top of the page to customize your buttons, then click on a button to see the automatically generated classes at the bottom of the page.