Buttons

Add stylized buttons to your pages.

Buttons

In the Style... drop-down menu there are 6 different button styles for you to use.  To apply one of these styles you should:

  1. type out the text that you want to appear on the button.
  2. select the text and choose the button style of your choice from the Style... drop-down menu.
  3. select the button text again and add your link.

Ensure that you apply the button style before you add the link!  This will ensure that both the button and the text on the button are a clickable link.  If the link is added before the button style, then only the text on the button (and not the rectangular button) will be a link.

 

Smaller Buttons

Make an Appointment

Refer a Patient

Make a Gift

 The buttons by default are fairly large and display large text.  By editing the html you can easily scale down the buttons.

The default code for your buttons should look something like this:

<a class="external-link" href="resolveuid/1234" target="_self" title=""><span class="btn btn-large btn-blue xxLargeFont">Make a Gift</span></a>

The code highlighted in bold, red text is the code that can be edited or deleted to resize the buttons.

  • Deleting the btn-large class will make the button smaller.
  • Changing or deleting the xxLargeFont will resize the text on the button.  Font size options from largest to smallest are xxxLargeFontxxLargeFontxLargeFont, LargeFontSmallFont, and xSmallFont.  Simply replace xxLargeFont with the size of your choice.

Your new code should look something like this:

<a class="external-link" href="resolveuid/1234" target="_self" title=""><span class="btn btn-blue xLargeFont">Make a Gift</span></a>

 

Make Your Buttons A Uniform Size

Make an Appointment

Refer a Patient

Make a Gift

To make your buttons a uniform size, simply add style="width: 30%;" to the code for each button.  Change the percentage to accommodate the needs of your site.

Your code should look something like this:

<a class="internal-link" href="resolveuid/1234" target="_self" title=""><span class="btn btn-blue xLargeFont" style="width: 30%;">Schedule an Appointment</span></a>

 

How Buttons Are Being Used

Some sites like to use a single button to draw attention to information such as appointments, directions, how to donate, etc. 

Button Example 12
Curriculum in Toxicology


Button Example 3
UNC Center for Functional GI & Motility Disorders

 

Button Example 4
UNC Department of Obstetrics & Gynecology


Button Example 6
Division of Occupational Science and Occupational Therapy

Button Example
Department of Neurosurgery 


Button Example 2
Department of Pediatrics

 

Button Example 7
Rehabilitation Counseling and Psychology

 

ButtonExample_09.png
Center for Women's Health Research at UNC

 

ButtonExample_10.png
Carolina Geriatric Education Center (CGEC)

 

ButtonExample_11.png
Department of Urology