FareHarbor buttons stylesheet
Last updated: September 29, 2022
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> or closing </body> 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" />
If your site has a global header or footer, add it there to install the stylesheet on the entire site.
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 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:
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.
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> |
Internal-only content. Don't copy and paste to anyone.
A complete list of the classes available using the v2 button stylesheet.
Button Types
| Code | Preview | Description |
|---|---|---|
fh-button-2d |
Book | Makes the button look like it’s 2d. |
fh-button-flat |
Book | Gives the button a border. |
fh-button-outline |
Book | Button is clear but has a border. |
fh-button-true-flat |
Book | Button is completely flat on the page with no border. |
fh-button |
Book | Normal book button that defaults to blue. |
Button Display Options
| Code | Preview | Description |
|---|---|---|
fh-color--black |
Book | Makes font black. |
fh-color--white |
Book | Makes font white. |
fh-display--block |
Book | Makes the button as wide as the block and centers the text. |
fh-fixed--bottom |
Book | Puts the button at fixed location at the bottom right-hand side of the screen. |
fh-fixed--side |
Book | Puts the button vertical all of the way on the right-hand side of the screen. |
fh-fixed--top |
Book | Puts the button at fixed location at the top right-hand side of the screen. |
fh-font--inherit |
Book | Changes the font to the site’s default font. |
fh-hide--desktop |
Hides button on the desktop view. | |
fh-hide--mobile |
Hides button on the mobile view. | |
fh-color--black |
Book | Makes font black. |
fh-color--white |
Book | Makes font white. |
fh-shape--round |
Book | Gives the button a round shape. |
fh-shape--square |
Book | Gives the button a more square shape. |
fh-size--large |
Book | Makes the button larger. |
fh-size--small |
Book | Makes the button smaller. |
Button Icons
| Code | Preview | Description |
|---|---|---|
fh-icon--cal |
Book | Adds a calendar icon to the button. |
fh-icon--gift |
Book | Adds a present icon to the button. |
fh-icon--map |
Book | Adds a dropped pin icon to the button. |
fh-icon--check |
Book | Adds a check mark icon within a circle to the button. |
fh-icon--arrow |
Book | Adds an arrow icon to the button. |
fh-icon--ticket |
Book | Adds a ticket icon to the button. |
fh-icon--check-bubble |
Book | Adds a green bubble with a white check mark icon to the button. |
fh-icon--dollar |
Book | Adds a ‘$’ icon to the button. |
fh-icon--clock |
Book | Adds a clock symbol icon to the button. |
fh-icon--user |
Book | Adds a person icon to the button. |
fh-icon--users |
Book | Adds a 3-person icon to the button. |
fh-icon--lock |
Book | Adds a lock symbol icon to the button. |
fh-icon--phone |
Book | Adds a phone symbol icon to the button. |
fh-icon--camera |
Book | Adds a camera symbol icon to the button. |
fh-icon--beer |
Book | Adds a beer mug icon to the button. |
fh-icon--anchor |
Book | Adds a boat’s anchor icon to the button. |
fh-icon--ship |
Book | Adds a boat in water icon to the button. |
fh-icon--location |
Book | Adds a directional arrowhead icon to the button. |
fh-icon--caret-right |
Book | Adds a caret icon pointing to the right to the button. |
fh-icon--cutlery |
Book | Adds a fork and knife icon to the button. |
fh-icon--bus |
Book | Adds a bus icon to the button. |
fh-icon--taxi |
Book | Adds a taxi cab icon to the button. |
fh-icon--shopping-cart |
Book | Adds a shopping cart icon to the button. |
fh-icon--life-ring |
Book | Adds a life preserver icon to the button. |
fh-icon--bed |
Book | Adds a bed icon to the button. |
fh-icon--check-square |
Book | Adds a checked box icon to the button. |
fh-icon--calendar-check |
Book | Adds a calender with a check mark icon to the button. |
FH Margins
| Code | Preview | Description |
|---|---|---|
fh-margin--5 |
Book | Adds a 5px margin to the top and bottom of the button. |
fh-margin--15 |
Book | Adds a 15px margin to the top and bottom of the button. |
fh-margin--40 |
Book | Adds a 40px margin to the top and bottom of the button. |
fh-margin--all-5 |
Book | Adds a 5px margin to all sides of the button. |
fh-margin--all-15 |
Book | Adds a 15px margin to all sides of the button. |
fh-margin--all-40 |
Book | Adds a 40px margin to all sides of the button. |
fh-margin--bottom-5 |
Book | Adds a 5px margin to the bottom of the button. |
fh-margin--bottom-15 |
Book | Adds a 15px margin to the bottom of the button. |
fh-margin--bottom-40 |
Book | Adds a 40px margin to the bottom of the button. |
fh-margin--top-5 |
Book | Adds a 5px margin to the top of the button. |
fh-margin--top-15 |
Book | Adds a 15px margin to the top of the button. |
fh-margin--top-40 |
Book | Adds a 40px margin to the top of the button. |