Link Styles

Popular buttons and links 

Regular link

This is a regular link

When you link text in copy it appears maroon with an underline, and the cursor appears as a hand when you hover over the link.

  • The underline helps indicate to users that it's a link. Never underline text on a website that is not linked up.
  • Because links are maroon, for web usability it's best that other text on the site is not maroon as that color helps indicate when something is a link.

Emphasis link

Use the emphasis link style when you are:

  • linking to supplemental/supporting information on a topic
  • providing an index or feed that continues to another page of content, as with a news/blog post
  • listing a series, such as the title of an office/unit/program followed by a blurb about it (this works well when used in conjunction with a heading style to help make the list scannable, as shown in the listing examples below).

This style works well when somewhat longer copy is needed for links vs. buttons which should have very short copy.

Avoid using just "read more" or "learn more" language. Instead determine meaningful language to link up. This is helpful for web accessibility and usability. 

Examples:

Plain button

I'm just a button.

Link: Button

Action button

The action button creates a little more emphasis than the read more link and a little less emphasis than the fancy button.

Because it's light gray and transparent, the action button's magical power is that it can overlay on top of other color backgrounds—as seen in the employee spotlight feature on the AHC Resource Hub.

Code should look like: <a href="/thisismylink.com" class="txt-btn-action">text here</a>

Link: Action Button

Examples:

It also works with document downloads:

Web support structure

Fancy button

Use fancy button when you want users to know: This is important, take action! Right now, people! The button says all of that without you having to do so in your copy.

Follow the advice earlier on this page for writing effective links. Copy should be active and brief. Less talk, more action.

If a certain important action appears throughout the site, you can use fancy button for it consistently throughout the site to help create a visual recognition for that action, as shown in some of the examples below.

Link: Fancy Button

Examples:


Specialized button and link styles

Use these styles created for very specific types of links to give additional meaning to users. 

Give button

The maroon button, called: Link: Give Button, is reserved for giving asks: Give, Give now, Make a gift, Donate, etc. This is to establish a consistent look for giving buttons across sites. Use this button when asking people to make a gift online, as it will help draw attention to this important action.

As advised by the University of Minnesota Foundation, we recommend using the maroon button with the wording "Give now" on every giving page and when you have asks on other pages, and link it to as specific a fund as you can. People are more likely to give if the button goes to a specific fund vs. a menu of choices.

For other actions use a non-maroon button option.

Link: Give Button

Examples:

External and same site feature links

On our websites it's important to identify connection points between content. While content may "live" within a particular section in the site organization and navigation, it's important to link to content of interest throughout the site in relevant places.

The external and same site link styles help create emphasis for these content connection points. You don't want to use these styles too heavily, and some sites may not use them at all. You'll want to reserve them for when you want the connection point links to stand out on the page. If you decide to use them on your site, try to incorporate throughout the site to help create meaningful signposts.

These link styles work well when you have longer text to link up vs. a short, directive action (which works best with a button).

  • Use the same site link for connection points to pages of the site you are on (within the same domain, e.g., for this site that's training.ahc.umn.edu/your-content).
  • Use the external site link for connection points to content on an entirely separate site (lives under a different domain).

Note that you can't have images overlap with the external and internal link styles.

Link: Feature - External Site

Link: Feature - Same Site

Examples of external style:

Examples of same site style:

Both:

Jump off button

Use when you have a web page with limited content because the majority of the content is on a different site. The purpose of the button is to tell users to visit this separate site for the content of interest. Jump off the site you're on right now to find what you seek!

Link: Jump Off Button

Examples:

The Department of Microbiology and Immunology has several short pages directing users to external sites that house the key content:

These pages for MD students and for residents and fellows were created as placeholders and direct users immediately to other sites, until the content from those external sites is brought into the main Medical School site. Note the color has been altered.

This page on the Office of Education links to the external site for their national center. They needed a page on the office site to explain the center, as it's a key aspect of what they do, but the site itself goes beyond the U and is hosted externally. We did not have the external site style at the time this was created, but it's a perfect candidate for it. 

Highlight text

The Link: Highlight Text style can be call out a key action.

It can be used on the same line as regular type, unlike most buttons which should be on a separate line of copy. Link: Highlight Text

Examples: 

Medical School:


List: Links

To create a list of links, make an unordered (bulleted) list of links. Highlight the list and apply List: Links, located under the Styles dropdown menu in the WYSIWIG toolbar.


Text sizes

For web accessibility, it's important to use heading styles for their intended purpose: Headings within your copy. Sometimes it can be useful to increase the text of your links, though, for various reasons. 

Text Size: Medium

Text Size: Large

Text Size: Extra Large

Emphasis

You can apply Link: Emphasis in conjunction with a text size style to increase the size.

Highlight text

At times you may also want to use it in conjunction with a text size style to increase the size.

Link: Highlight Text + Text Size: Medium

Link: Highlight Text + Text Size: Large

Link: Highlight Text + Text Size: Extra Large

Buttons

Some examples...

Fancy Button + Medium

Give Button + Large

Plain Button + Extra Large