Facebook Pixel Button Link Component | Western Kentucky University Skip to main content

Button Link Component


Buttons are a great way to make a link stand out in a section or on a page. Use the different styles of buttons to convey primary and secondary actions or match alert styles. Buttons also come in different sizes to suit any space or fill the content area. With this component Font Awesome icons can also be added before or after the text of the button.

 

Component Fields


Button Text

The text that appears inside the button. Keep this text brief and clear, use calls to action. Describe the page you are linking to and inspire the user to click with action words. Usually two words, sometimes three. (maximum of 32 characters)

Do not use "Click Here"!  Calls to action such as "Apply Now", "Register for TOP", or "Contact ITS" are good examples of button text.

 

Link

The page or URL to be linked to. Use the file icon to select a WKU web page or file using the dependency manager, or enter a full url starting with http:// or https://.

 

Style

The color or style of the button. Use the WKU Red button to convey primary actions that you want a user to take. The Gray Outline and Red Outline styles are great for secondary actions you need to include. For example, an "Apply Now" button would be the red primary action you want to be clicked, while "Learn More" would be the secondary to that.

Alert styles are also available for use in the alert snippets.

  • WKU Red (Primary)
  • Gray Outline (Secondary)
  • WKU Red Outline
  • Success (Green Alert)
  • Info (Blue Alert)
  • Warning (Yellow Alert)
  • Danger (Red Alert)

 

Size

The size of the button. By default buttons are medium sized, use large buttons in main content areas and small buttons in side columns and cards with limited space.

  • Small
  • Medium (Default)
  • Large

 

Title (Optional)

Titles are used for accessibility to expand on the text of the link. For example if you use the text "Contact Us", you may want to give more context as to who will be contacted. Use a title such as "Contact the ITS Service Desk for Help".

 

Open in New Tab

Opens links in a new browser tab. Helpful when linking to content such as videos that automatically plays or when you don't want a user to lose information entered into a form.

  • Yes
  • No (Default)

 

Icon (Optional)

Include an icon in the text of the button. Use the Icons - Font Awesome Gadget to search available icons and copy the icon name and icon style prefix to paste into this field. Must include the style prefix (fab, fas, far, or fal) and icon name starting with fa-. Ex. "fab fa-facebook" or "far fa-flag"

 

Icon Location (Optional)

If an Icon name is included in the previous field, this will determine where it displays in the button. Display your icon before the text (left), or after the text (right).

  • Left (Default)
  • Right

 

Full Width (Optional)

Makes the button fill the width of the content area. This is great for small spaces like cards or side columns. Avoid using this style in very wide areas like the main content area.

  • Yes
  • No(Default)

 

 

Examples


Example 1

Examples of the different style buttons available.

  • Button Text: Name of Button Style, see options above
  • Link: /funnymonkeys
  • Style: Example of each, see options above
  • Size: Medium (Default)
  • Title: N/A
  • Open in New Tab: No
  • Icon: N/A
  • Icon Location: N/A
  • Full Width: No

 

 

Example 2

Primary buttons demonstrating the different sizes available.

Small    Medium Button (Default)    Large Button

  • Button Text: Name of Size, see options above
  • Link: /funnymonkeys
  • Style: WKU Red (Primary)
  • Size: Example of each, see options above
  • Title: N/A
  • Open in New Tab: No
  • Icon: N/A
  • Icon Location: N/A
  • Full Width :No

 

 

Example 3

These buttons demonstrate the Font Awesome icon options.

Course Catalog

  • Button Text: Course Catalog
  • Link: http://catalog.wku.edu/
  • Style: WKU Red (Primary)
  • Size: Medium (Default)
  • Title: N/A
  • Open in New Tab: Yes
  • Icon: far fa-graduation-cap
  • Icon Location: Left
  • Full Width: No

About Buttons

  • Button Text: About Buttons
  • Link: https://en.wikipedia.org/wiki/Button
  • Style: WKU Red (Primary)
  • Size: Medium (Default)
  • Title: Learn more about buttons on Wikipedia
  • Open in New Tab: No
  • Icon: fas fa-external-link
  • Icon Location: Right
  • Full Width: No

 

 

Example 3

The following buttons demonstrate the Full Width setting inside a card with the small size.

Example 3
with a Full Width button

Curabitur porta, felis eget semper pellentesque, felis turpis viverra urna, ac suscipit turpis leo sed odio. Suspendisse scelerisque risus velit, non efficitur urna aliquam id. Quisque ante ipsum, mattis ac mattis non, viverra nec diam. Quisque suscipit pellentesque nisl et vehicula.

 

  • Button Text: Card Snippets
  • Link: /funnymonkeys/snippets/cards.pcf
  • Style: WKU Red (Primary)
  • Size: Small
  • Title: About Card Snippets
  • Open in New Tab: No
  • Icon: N/A
  • Icon Location: N/A
  • Full Width: Yes
 

 




Need Assistance?

The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.

Get Help



Some of the links on this page may require additional software to view.

 Last Modified 8/18/20