Custom Interface - Buttons

Buttons

Custom Interface - Buttons

Instructions

To add a link follow the steps listed below:

1. Copy the code <a href="#">This is a link</a>

2. Go to your text box where you are adding your link and click on "Source" from the WYSISWG at the top.

3. Paste the copied code into the text box after clicking "Source" (paste the code by pressing Ctrl + v on your keyboard).

4. Replace the # within the parenthesis with the URL of the link you are linking to. 

5. Replace the "This is a link" text with the name of your link or the text that you are adding the link to. 

6. After clicking "Source" again to get out of the code section, you should see your text written and underlined in blue, you have now added your link. 

 

To add a button (any type: Thin, Call to Action, or with Icons) follow the steps listed below:

1. Copy the code of the button type you want from any of the options listed below.

2. Go to your text box where you are adding your link and click on "Source" from the WYSISWG at the top.

3. Paste the copied code after clicking "Source" (paste the code by pressing Ctrl + v on your keyboard).

4. Replace the # within the parenthesis with the URL of the link you are linking to. 

5. Replace the "This is a (button type)" text with the name of your link or the text that you are adding the link to. 

6. After clicking "Source" again to get out of the code section, you should see your text written and underlined in blue. 

7. To check the button save and then view your page. Your button should now be visible. 

Basic Link

When making a link its base style will look like as follows

This is a link

Code Section

<a href="#">This is a link</a>

Thin Buttons

You can make a simple link into a button by using the code listed below. The following are thin buttons and you can choose any of the styles listed below by using the corresponding code.  Note that some widths will vary depending on how many buttons are in a row. Thin buttons generally take up 100% of the width they are able.

This is a thin gold button

This is a thin dark button

This is a thin light button

This is a thin blue button

Code Section

<a class="uccsGoldButtonThin" href="#">This is a thin gold button</a>
<a class="uccsDarkButtonThin" href="#">This is a thin dark button</a>
<a class="uccsLightButtonThin" href="#">This is a thin light button</a>
<a class="uccsBlueButtonThin" href="#">This is a thin blue button</a>

Call to Action Buttons

The call to action (CTA) buttons are larger than the thin buttons. Other than that most of the style is the same.

Gold CTA Button

Dark CTA Button

Light CTA Button

Blue CTA Button

Code Section

<a class="CTAGoldButton" href="#">Gold CTA Button</a>
<a class="CTADarkButton" href="#">Dark CTA Button</a>
<a class="CTALightButton" href="#">Light CTA Button</a>
<a class="CTABlueButton" href="#">Blue CTA Button</a>

Buttons With Icons

Buttons with icons for documents and links.

PDF Button Name

Excel Button Name

Word Button Name

Power Point Button Name

Link Button Name

PDF Button Name

Excel Button Name

Word Button Name

Power Point Button Name

Link Button Name

PDF Button Name

Excel Button Name

Word Button Name

Power Point Button Name

Link Button Name

PDF Button Name

Excel Button Name

Word Button Name

Power Point Button Name

Link Button Name

Code Section

 
<a class="CTAGoldButton" data-entity-type="file" data-entity-uuid="file ID" href="#">PDF Button Name<i aria-hidden="true" class="fa fa-file-pdf" style="margin-left: .9em"></i></a>
<a class="CTAGoldButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Excel Button Name<i aria-hidden="true" class="fa fa-file-excel" style="margin-left: .9em"></i></a>
<a class="CTAGoldButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Word Button Name<i aria-hidden="true" class="fa fa-file-word" style="margin-left: .9em"></i></a>
<a class="CTAGoldButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Power Point Button Name<i aria-hidden="true" class="fa fa-file-powerpoint" style="margin-left: .9em"></i></a>
<a class="CTAGoldButton" href="#">Link Button Name<i aria-hidden="true" class="fa fa-link" style="margin-left: .9em"></i></a>
<a class="CTADarkButton" data-entity-type="file" data-entity-uuid="file ID" href="#">PDF Button Name<i aria-hidden="true" class="fa fa-file-pdf" style="margin-left: .9em"></i></a>
<a class="CTADarkButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Excel Button Name<i aria-hidden="true" class="fa fa-file-excel" style="margin-left: .9em"></i></a>
<a class="CTADarkButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Word Button Name<i aria-hidden="true" class="fa fa-file-word" style="margin-left: .9em"></i></a>
<a class="CTADarkButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Power Point Button Name<i aria-hidden="true" class="fa fa-file-powerpoint" style="margin-left: .9em"></i></a>
<a class="CTADarkButton" href="#">Link Button Name<i aria-hidden="true" class="fa fa-link" style="margin-left: .9em"></i></a>
<a class="CTALightButton" data-entity-type="file" data-entity-uuid="file ID" href="#">PDF Button Name<i aria-hidden="true" class="fa fa-file-pdf" style="margin-left: .9em"></i></a>
<a class="CTALightButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Excel Button Name<i aria-hidden="true" class="fa fa-file-excel" style="margin-left: .9em"></i></a>
<a class="CTALightButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Word Button Name<i aria-hidden="true" class="fa fa-file-word" style="margin-left: .9em"></i></a>
<a class="CTALightButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Power Point Button Name<i aria-hidden="true" class="fa fa-file-powerpoint" style="margin-left: .9em"></i></a>
<a class="CTALightButton" href="#">Link Button Name<i aria-hidden="true" class="fa fa-link" style="margin-left: .9em"></i></a>
<a class="CTABlueButton" data-entity-type="file" data-entity-uuid="file ID" href="#">PDF Button Name<i aria-hidden="true" class="fa fa-file-pdf" style="margin-left: .9em"></i></a>
<a class="CTABlueButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Excel Button Name<i aria-hidden="true" class="fa fa-file-excel" style="margin-left: .9em"></i></a>
<a class="CTABlueButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Word Button Name<i aria-hidden="true" class="fa fa-file-word" style="margin-left: .9em"></i></a>
<a class="CTABlueButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Power Point Button Name<i aria-hidden="true" class="fa fa-file-powerpoint" style="margin-left: .9em"></i></a>
<a class="CTABlueButton" href="#">Link Button Name<i aria-hidden="true" class="fa fa-link" style="margin-left: .9em"></i></a>