Skip to main content

TERMINALFOUR (T4) Tip 7: Use Buttons To Make Links Stand-out

Note: For the examples below, you may not be able to copy and paste directly from here to T4. To use the snippets below copy and paste my examples into the decoder, then paste the output into your T4 editor.

Intended Audience:

TERMINALFOUR WEB MAINTAINERS and PRIMARY WEB COORDINATORS

TIP: Make ordinary web links standout by using buttons.

Explanation: Use the following syntax to change a text link into a button:

BUTTON:

<a href=”#” class=”button“>UF/IFAS RESEARCH RESOURCES</a>

BUTTON WITH ROUNDED CORNERS:

<a href=”#” class=”button radius“>UF/IFAS RESEARCH RESOURCES</a>

BUTTON WITH ROUNDED CORNERS & UF muted Orange:

<a href=”#” class=”button radius ufmutedorng“>UF/IFAS RESEARCH RESOURCES</a>

BUTTON WITH ROUNDED CORNERS & UF muted Blue:

<a href=”#” class=”button radius ufmutedblu“>UF/IFAS RESEARCH RESOURCES</a>

BUTTON WITH ROUNDED CORNERS & UF primary Orange:

<a href=”#” class=”button radius ufprimaryorng“>UF/IFAS RESEARCH RESOURCES</a>

BUTTON WITH ROUNDED CORNERS & UF primary Blue:

<a href=”#” class=”button radius ufprimaryblu“>UF/IFAS RESEARCH RESOURCES</a>

BUTTON WITH ROUNDED CORNERS & grey color:

<a href=”#” class=”button radius secondary“>UF/IFAS RESEARCH RESOURCES</a>

In T4, it is easier to create and edit a button using the HTML editor. Here is some button syntax after linking it to a section in T4:

<a href=”SiteManager?ctfn=hierarchy&amp;fnno=10&amp;sid=80272&amp;cid=198214&amp;lang=en&amp;sslinkid=2″ title=”button | Links to: Home &raquo; ufl.edu &raquo; give.ifas.ufl.edu &raquo; SHARE Council Member Directory: Full Page Layout” class=”button radius ufmutedorng“>SOME RESOURCES</a>

Once your buttons are added in the T4/HTML editor, they will appear like this in editor as a regular link:

buttons

Don’t worry about how the button syntax/code looks in the T4 editor view. When you preview the page, you should see something like this or the below:

button-1

The above is just one way of creating buttons to make your links stand-out.