Tutorial Button Function

Button Function

 

Buttons are a quick, easy method to make links to other portions of your website.

Buttons can be links to a webpage; email, telephone, or google map.  Use your Practice Page to try different versions on buttons and to view the results.  Buttons can have a variety of sizes and shapes as defined by the web page creator.

Following are some examples of buttons made using the Button Function.

 

 

button function

button function 1.fw
Select ADD, then select BUTTON from drop-down menu.

Single Button Directions:

button_function_2.fw

 

button_function_3.fw

  • In Link Text box, type in the word or phrase you want to appear on your button.
  • If linking to a web page on your website, select the page name from the Page drop down menu.
  • Entering an email address inEmail will directly access email.
  • Entering Phone number will allow mobile devices to dial that number.
  • Entering Phone number will allow mobile devices to dial that number.
  • Entering address in Map will access Google map.
  • Link opens in defaults to Same Window.
  • Click Apply to save your information.
  • Click Done to save and exit.
  • Adjust the size of your button as desired.

Multiple Button Directions:

  • Button Function can be used to create menu, lists, table of contents, and more..
  • Select Horizontal or Vertical Menu.  (See examples below)
  • Select Add a Link.
  • Keep Adding links until completed.
  • If you will not be linking to a page, put the  #  character in External URL box.
  • Use arrows to indent menu items under heading.
  • Click Done to save and exit.

button_function_9.fw

button_function_7.fw

button_function_10.fw

button_function_8.fw

button_function_4.fw

 

Basic Styles Tab:

  • Select  Text Color - You can select from the color wheel, or enter in a 6 digit color number.  Be sure to use # in front of color.
  • BG Color (Background Color) is the color that will display as default.
  • Hover Text and Hover BG Color is the color that displays when the cursor is placed on the button.
  • The example button styles are shown here.

button_function_5.fw

 

Advanced Tab:

  • Underline Links - use drop-down menu to select your choice.
  • Sub-menu BG - you can choose a different background for sub-menus.
  • You can choose to separate menus by a horizontal or vertical ine, and choose the color of that line.

button_function_6.fw

 

Buttons Tab:

  • In our example, the border color for the button is black.
  • The Corner Radius is 10.
  • Add Drop Shadows and Add Gradient are selected.