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 the stylesheet. To do this, append the query parameter colorname=HEX to the stylesheet URL, replacing ‘HEX’ with an HTML hex color value and replacing ‘colorname’ with a color label. For example, adding red=ff0000) generates color variations for all above button styles, including fh-button-red, fh-button-2d-red etc.
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.