What is a Button

In a system, a button is actually a link by itself, but display with a graphical format.  The link can be an internal link, which means another web page in the same system, or an external link, which is on another website.

Difference between Buttons and Links

Functionally both buttons and links are the same.  Links are very popular which are basically text with embedded hyperlink.  It is normally part of the text.

A button, as graphics, is also a link but stands out to be an object for clicking.  If you think about it, it attracts audiences' attention, with the magic attraction for them to click on it.

Open in New Window / Tab

Links can be configured in 2 ways:

  1. Open up another page in the same browser window
  2. Open up another page in a new window / tab

The difference is, whether or not we want them to leave away from the current page, or we want to give them convenience coming back.  It is a matter of user experience design.  When we create a link, either button or text link, we can specify whether or not we want the link to open in new window / tab.  It is an optional setting.

Create a Text Link

Create a Text Link

Creating a text link is easy:

  1. Select the text by highlighting them with the mouse
  2. Select the link icon in the editor
  3. A dialog window will pop-up.  Fill in the link
  4. By default, it opens the link in the same browser window.  If we want the link to be opened in a new window, click on Advanced, and select the checkbox for 'open in new window / tab'

 

 

Create a Button

Create a Button

As previously mentioned.  A button is a link.  So we create a link first.

  1. Create a link first by following the steps above for text link, but note the button text:
    • The text shown inside the button will be same as the text selected
    • Text inside the button should not be too long, and action oriented
  2. Position the selected text link, whether follow normal text flow which is on the left, middle of page, or right hand side
    • This can be achieved by using the left, middle or right alignment icon in the text editor
  3. Then we proceed to create the button with the following procedure:
    1. Select the button text
    2. Select the 'Styles' icon in the editor, more options will scroll down
    3. Select the item 'W3 Button', and it is done.
  4. Save the page

Note that the button will not show up while in the editor mode.  It will only appear after saving the entire page.

By default, the button will match the color of the website.  If a different color is desired, it is possible, but require more knowledge in some simple coding.