1. Tutorials
  2. Manage Content
  3. Buttons and Link Styles

Buttons and Link Styles

WebPublish offers a variety of button styles to add to your links, by adding a "CSS class" to the link tag.

CSS (cascading style sheet) allows a site designer to set up rules for styling all the content in a website. Additional classes can be created to augment the base styling, to be used in certain circumstances -- i.e. it can set to apply additional styling, such as font size, colour, spacing, line height, padding, margins, background colour, etc for a repeating element on the site.

For buttons styles in WebPublish 3, a "button" class can be added. i.e. <a class="button">

But in the case of the button class, on its own it does not provide a complete style, so an additional choice must be made.

Colour

The first set of styles to choose from for your button link is colour. The available class names you can add to your buttons are: "-blue" "-red" "-yellow" "-grey" and "-outline"

HTML Example:
<a class="button -blue" href="[input link URL]">Button</a>

button -blue button -red button -yellow button -grey button -outline

Size

You can also choose to alter the size of your buttons. The above example is the standard button size. Additionally you can make your buttons larger or smaller with the following classes: "-big" and "-small"

Note: Large and small button styles are applied only to desktop, laptop or tablet size devices. This ensures mobile users have an adequate "hit box" for all buttons.

<a class="button -blue -big" href="[input link URL]">Button</a>

button -blue -big button -blue -small

Button styling

  1. You can add your button styling when adding a link, or highlight an existing link with your mouse and double click the link icon to open the dialog box. (Note: there is a known issue with a popup overlay that appears when you double click the link. Click either OK or Cancel to remove this - you will then be able to modify your link settings)
  2. Click the Advanced drop-down. Add the desired button class to the CSS classes field
  3. Click "Save." The changes will take effect once you save the page

  1. Navigate to the link text where you applied button styling
  2. Double click the link to open the dialog box. (Note: there is a known issue with a popup overlay that appears when you double click the link. Click either OK or Cancel to remove this - you will then be able to modify your link settings)
  3. Click the Advanced drop-down. Modify the button class as desired in the CSS classes field. 
  4. Click "Save." The changes will take effect once you save the page.

  1. Navigate to the link text where you applied button styling
  2. Double click the link to open the dialog box. (Note: there is a known issue with a popup overlay that appears when you double click the link. Click either OK or Cancel to remove this - you will then be able to modify your link settings)
  3. Click the Advanced drop-down. Remove the button class from the CSS classes field
  4. Click "Save"

Font Awesome icons

Font Awesome icons can also appear within the button styling, such as to indicate a link to a PDF file

Font Awesome icons can also be added to links, to help denote things like file downloads, links that navigate away from the site, etc.

  1. Navigate to the link text where you'd like to add the icon. (Note: it's important that the text has been linked before adding a Font Awesome icon)
  2. Highlight the link and click the Font Awesome icon in the WYSIWYG editor
  3. Use the Icon Name field to search for the icon that you'd like to add. Alternatively, right-click the "Font Awesome icon list" hyperlink and select to open in a new tab to view the available icons
  4. Once the correct icon appears, select to add it to the link. You can also modify the Font Awesome setting using the "Additional Font Awesome Settings" drop-down
  5. Click "Insert Icon"
  6. The icon will now appear next to the link
Example of the code that is applied to the link: 
<a href="[insert document link]"><span class="fontawesome-icon-inline"><i class="fas fa-file-pdf"></i></span>Example</a>

Example (PDF 10KB)

  1. Navigate to the place in the link text where the Font Awesome icon appears. 
  2. To remove, simply set your cursor to the right of the icon and hit backspace on your keyboard

  1. Navigate to the link text where you'd like to add the button styling and icon. (Note: it's important that the text has been linked before adding a Font Awesome icon)
  2. Double click the link to open the dialog box. (Note: there is a known issue with a popup overlay that appears when you double click the link. Click either OK or Cancel to remove this - you will then be able to modify your link settings)
  3. Click the Advanced drop-down. Add the desired button class to the CSS classes field
  4. Click "Save"
  5. Highlight the link and click the Font Awesome icon in the WYSIWYG editor
  6. Use the Icon Name field to search for the icon that you'd like to add. Alternatively, right-click the "Font Awesome icon list" hyperlink and select to open in a new tab to view the available icons
  7. Once the correct icon appears, select to add it to the link. You can also modify the Font Awesome setting using the "Additional Font Awesome Settings" drop-down
  8. Click "Insert Icon"
  9. The icon will now appear next to the link. When you save the page, the button styling will appear
Example of the code that is applied to the link: 
<a class="button -red" href="[insert document link]"><span class="fontawesome-icon-inline"><i class="fas fa-file-pdf"></i></span>Example (PDF 10KB)</a>

Example (PDF 10KB)