School navigation

LiveWhale Support

Buttons

Buttons are used in select instances where a simple hyperlink does not have sufficient presence as a primary action. They can be applied to standard hyperlinks (the a tag) or to form buttons (e.g. submit, cancel).

Guidelines

Below are the available styles for buttons on the Lewis & Clark website. Please respect the following:

DO’s

  1. Use a button when you can adequately choose an active word to indicate exactly what is on the other side of the action. Think: Apply.
  2. Use a button when there is a small number of or better, only one, popular tasks that you want to direct the site visitor through. These would generally be functional tasks, but not always.
  3. Use the positive and negative colors in the big style in forms to indicate actions such as Send/Submit (positive) or Cancel (negative).
  4. Use the school-specific colored buttons anywhere on that school’s site.

DON’Ts

  1. Never have more than three words or 20 characters as button text. Button text that is too long defeats the value of highlighting it.
  2. Do not use the positive/negative colors or the big style outside of form-related actions. Exceptions are possible, with prior New Media consent.
  3. Do not use school-specific colored buttons within a different school or on institutional webpages.
  4. A series of buttons should never duplicate a significant portion of your site navigation. If this is the case, then you should meet up with us to talk about how to improve your site navigation, because buttons won’t help.

We reserve the right to restrict/remove editing rights from site editors who ignore the above guidelines; if you have question or need guidance, just ask. We are more than happy to help you work through any issue.

Usage

You can apply these styles by simply adding specific class attributes to any link tag (<a>) or unnumbered list tag (<ul>) in HTML4 as well as to the new navigation tag (<nav>) in HTML5. When using the buttons in a series, the enclosing tag (<ul> or <nav>) must have the class attribute buttons as shown below.

Stand-alone (HTML4/5)

Bold Button

<a href="#" class="button bold">Bold Button</a>

Multiple horizontal buttons

<ul class="horizontal buttons">
  <li><a href="#">Button1</a></li>
  <li><a href="#">Button2</a></li>
  <li><a href="#">Button3</a></li>
</ul>

Multiple horizontal centered buttons

<ul class="horizontal centered buttons">
  <li><a href="#" class="graduate">Button1</a></li>
  <li><a href="#" class="graduate">Button2</a></li>
  <li><a href="#" class="graduate">Button3</a></li>
</ul>

Multiple horizontal buttons - Option 2

<nav class="buttons">
  <a href="#" class="green big bold">Submit</a>
  <a href="#" class="red big">Cancel</a>
</nav>

Styles Available

Combine the styles below to produce the effect needed — only the button or buttons class attribute is required.

Basic

Default Button

<a class="button" href="#">Simple Button</a>

Bold Button

<a class="bold button" href="#">Bold Button</a>

Big Button

<a class="big button" href="#">Big Button</a>

Big Bold Button

<a class="big bold button" href="#">Big Bold Button</a>

Colors

Dark Grey

Dark Grey Button

<a class="dark_grey button" href="#">Dark Grey Button</a>

Bold Dark Grey Button

<a class="bold dark_grey button" href="#">Bold Dark Grey Button</a>

Big Dark Grey Button

<a class="big dark_grey button" href="#">Big Dark Grey Button</a>

Big Bold Dark Grey Button

<a class="big bold dark_grey button" href="#">Big Bold Dark Grey Button</a>

College (Red)

College Button

<a class="college button" href="#">College Button</a>

Bold College Button

<a class="bold college button" href="#">Bold College Button</a>

Big College Button

<a class="big college button" href="#">Big College Button</a>

Big Bold College Button

<a class="big bold college button" href="#">Big Bold College Button</a>

Law (Blue)

Law Button

<a class="law button" href="#">Law Button</a>

Bold Law Button

<a class="bold law button" href="#">Bold Law Button</a>

Big Law Button

<a class="big law button" href="#">Big Law Button</a>

Big Bold Law Button

<a class="big bold law button" href="#">Big Bold Law Button</a>

Graduate (Orange)

Graduate Button

<a class="graduate button" href="#">Graduate Button</a>

Bold Graduate Button

<a class="bold graduate button" href="#">Bold Graduate Button</a>

Big Graduate Button

<a class="big graduate button" href="#">Big Graduate Button</a>

Big Bold Graduate Button

<a class="big bold graduate button" href="#">Big Bold Graduate Button</a>

Selected or Current (hover)

To indicate that one button is the current state for menus or navigational use, you can apply the selected or current style. (It makes the button look the same as when you hover over it.)

Selected Button

<a href="#" class="button selected">Selected Button</a>

Example:

<ul class="horizontal centered buttons">
  <li><a href="#" class="graduate">Button1</a></li>
  <li><a href="#" class="graduate selected">Button2</a></li>
  <li><a href="#" class="graduate">Button3</a></li>
</ul>

Positive (green) and Negative (red)

Use the positive and negative styles when appropriate in forms. The submit action should almost always be shown using the positive style.

<input type="submit" value="Send" name="submit" class="positive button" />

<input type="submit" value="Send" name="submit" class="big positive bold button" />

<input type="reset" value="Reset Form" name="reset" class="big negative button" />

LiveWhale Support

Contact Us