FareHarbor buttons stylesheet
Last updated: September 28, 2018
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.
For information on how to install and use the stylesheet, click into the sections below.
Installation
To install the stylesheet, include the following code right above the closing </head> tag on the desired page, and modify the colors as needed:
<!-- FareHarbor buttons stylesheet -- do not remove -->
<link rel="stylesheet" href="https://fh-kit.com/buttons/v2/?red=cc0000&orange=ff6000&green=3AB134" type="text/css" media="screen" />
Be sure to install the ‘v2’ version of the stylesheet for the latest updates and button features.
Types of buttons
Once you’ve added the stylesheet, you can add any one of the classes below to an element to turn it into a button.
Original
The original FareHarbor buttons have a beveled appearance, making them stand out on the page. For original buttons, use class="fh-button".
Example: <a href="#" class="fh-button">Book Now</a>
2D
2D buttons create a bold look, and appear to “pop up” when you hover over them. For 2D buttons, use class="fh-button-2d".
Flat
These buttons work well on websites that have a flatter design. For flat buttons, use class="fh-button-flat".
True-Flat
Stripped of all extra styling, these are the most plain buttons. For true flat buttons, use class="fh-button-true-flat".
Outline
These buttons are clear with a colored outline. For outline buttons, use class="fh-button-outline".
Color options
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:
Modifying classes
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.
Icons
Add icons using the classes fh-icon--cal, fh-icon--check, fh-icon--map, fh-icon--gift, fh-icon--arrow, fh-icon--ticket, fh-icon--check-bubble, fh-icon--dollar, fh-icon--clock.
Sizes
The above examples use classes fh-size--small and fh-size--large.
Shape
Give your buttons round or square edges with classes fh-shape--round or fh-shape--square.
Hide on mobile/desktop
If needed, you can use fh-hide--mobile or fh-hide--desktop to hide a button based on whether the user is seeing a mobile or desktop view of the page.
Fixed buttons
When this class is used, a button’s position will be fixed on the page as the user scrolls. See the right side of this page for an example.
Use class fh-fixed--bottom to fix to the bottom right of a page, or class fh-fixed--side to fix to the right side of a page at a 90-degree angle.
On mobile devices, fixed buttons at the bottom of the page will always be centered.
Examples
Below are some examples of buttons you can create with the buttons stylesheet.
| Preview | Code |
|---|---|
| Book Online | <a href="#" class="fh-button .fh-size--small">Book Online</a> |
| Book Now | <a href="#" class="fh-button-outline-red">Book Now</a> |
| Buy Now | <a href="#" class="fh-button-flat fh-icon--gift">Buy Now</a> |
| Book Now | <a href="#" class="fh-button-2d fh-icon--map">Book Now</a> |
| Book Now | <a href="#" class="fh-button-2d-green fh-shape--round fh-icon--check">Book Now</a> |