Buttons are large graphic link elements that guide site users to important information without making them search. TAMHSC uses a consistent button style throughout all pages so that users can quickly recognize their functionality.
When to use & what problem does this solve?
Buttons add more visual interest and emphasis beyond a simple link. They can be used as wayfinding tools, illustrating a user's options for exploring a site's content and indicating the most popular information. They can also be used as a call to action, inviting users to interact directly with site owners.
The buttons below are appropriate for use on a department's website. These buttons should point directly to pages that have the most sought-after information for target users (based on user testing and/or site analytics) so users don't have to think to find what they're looking for. Wayfinding buttons can be used in groups, but usage should be limited to the most important information in order to maximize their visual impact.
Call to Action
The buttons below are examples of common calls to action on TAMHSC web pages. Each button would link directly to a corresponding form or web page where a user could carry out the stated action. Ideally, a page would use only one call to action in order to minimize user confusion.
TAMHSC buttons are uniform in height, typography style and rollover style. Their width is determined using the grid system.
Example html for a group of buttons
Looking at the code above,
- The outer div class "row buttons" provides additional padding around the group of buttons. This is unnecessary if you are adding a single button.
- The div class "columns six" sets the button width.
- Finally, the div class "button" sets the button style.
Webmasters may choose their button colors from our web color palette. Custom colors are not allowed. To use a custom button color, add the corresponding CSS class for the color you want to the button's html. For example:
Button text should be concise. There are occasions where its necessary to decrease the font size of a button to make the text fit. Use css to make these adjustments. For consistency, all buttons in a group should have the same font size.
Contact the web team if you need assistance with CSS.
Note: this is our local copy of Zurb's documentation. Our installation and styles differ in some ways from the stock foundation. To account for these differences, we have duplicated their documentation in our environment. This local documentation is authoritative for HSC sites.