Link Styles
Popular buttons and links
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:
- Linking to supporting content: Why Minnesota? | Medical Doctor (MD) | Student life
- Blog/news: Medical School Blog
- Listings with unit/program name linked up: Degrees offered | Research strengths and expertise | Blood and marrow transplant | Prepare for medical school
Plain button
I'm just a 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>
Examples:
- Links on rotating announcements on AHC Resource Hub home page
- Web point people by unit
- Drupal training feedback form
- Employee spotlights
It also works with document downloads:
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.
Examples:
- Join the AHC web community: Web home | Web contact | Training, tips, and tools
- Submit a report online: Diversity and inclusion | Minority Affairs and Diversity
- Find more resources for researchers
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.
Examples:
- Giving to the Medical School | Alumni | Give to research | Give to cardiology
- Giving to History of Medicine
- Giving to the Raptor Center | Adopt a raptor
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.
Examples of external style:
- Student life (Medical School)
- Program in the History of Medicine
- Medical Alumni Society > UMAA
Examples of same site style:
- Degrees offered: Learn more about our graduate programs and apply
- Residencies and fellowships: Financial awards
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!
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.
- Center for Genome Engineering
- Center for Immunology
- Center for Magnetic Resonance Research
- Center of American Indian and Minority Health
- Deborah E. Powell Center for Women's Health
- Developmental Biology Center
- Institute for Engineering in Medicine
- Institute for Translational Neuroscience
- Lillehei Heart Institute
- Program in Health Disparities Research
- Stem Cell Institute
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.
Link: Emphasis + Text Size: Medium
Link: Emphasis + Text Size: Large
Link: Emphasis + Text Size: Extra Large
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...
Make your links meaningful
When creating links it's important to use words that convey the content's meaning vs. click here, read more, or spelling out the full URL.