Drupal Template: 
UQ School Template

To insert a button on a Website, follow the instructions listed below using:

  1. Link dialog window
  2. Source code

Insert a button using the Link dialog window

Step 1 

Open the Content Type (basic page, article, etc) where the button will be inserted.

 

Step 2

Complete the following:

  1. Highlight the text that will converted to a button
  2. Click the link icon on the WYSIWYG editor to open the link dialog window.

Select text to be converted to a button

 

Step 3

The link dialog window appears. On the Link Info tab

  1. select the link type
  2. insert the link path.

Insert link for button

 

Step 4

On the Advanced Tab, enter button in the stylesheet classes field. 

Tip: ensure the stylesheet class is entered in lowercase.

Insert stylesheet class button

 

Step 5 

Click OK and the button, Register, displays.

Note: the button width setting reflects the text width plus padding. To expand the button width to the 100% width setting proceed to Step 6.

Example of button

The Register button displays:

Add a button - published display

Step 6

Edit the content. Right click on the button and select Edit Link

Edit Button link

 

Step 7

On the Advanced Tab of the link dialog window, enter button expand in the stylesheet classes field. 

Tip: ensure the stylesheet class is entered in lowercase.

Stylesheet class button expand

 

Step 8

Click OK and the button, Register, is saved. 

Updated button in WYSIWYG

The Register button displays at 100% width:

Add a button 100 percent width display


Insert a button using Source Code

Step 1 

Open the Content Type (basic page, article, etc) where the button will be inserted.

 

Step 2

Click Source icon in the WYSIWYG editor.

Select Source code

 

Step 3

Insert the cursor in the location where the button will display. Insert the code of the button type.  In this scenario, the Default Button will be inserted using the code: <a class="button" href="#">Default Button</a>

The # symbol refers to the URL that will be inserted.

inserted code

 

Step 4

Replace the # in the code with the URL that it should link to. In this instance, the # has been replaced with http://jobs.uq.edu.au/caw/en/listing/ and click Save.

URL reference

 

The default button displays:

Default button displays

 


Default Button Code

<a class="button" href="#">Default Button</a>

Replace # in the code with the URL that should be linked to the button.

DEFAULT APPEARANCE: Default button
HOVER APPEARANCE: Default button activated