Stanford
Stanford Sites User Guide

Creating buttons and action links

Jump to: Types of button links | Working with Buttons | Multi-button alignment

Stanford Sites provides a variety of styles you can use on your  links. These styles include button and action link styles.

  1. Add a link to the text.  (See Creating links in text)
  2. Select the link.
  3. From the Style dropdown in the Text Area toolbar, select a link style of your choice. Styles include Button, Big Button, Secondary Button, and Action Link.
  4. Save.
Screenshot illustrating Creating buttons and action links
Screenshot illustrating Creating buttons and action links

Types of button links

Button link

The Button link style can be applied to any link you have already created and can be found in the "Styles" dropdown in the editing tool. Use the Button link style to call out a link prominently on the screen. 

Button Link style 

Big Button link

The Big Button link style can be applied to any link you have already created and can be found in the "Styles" dropdown in the editing tool. Use the Big Button link style to call out a link even more prominently on the screen. We recommend reserving the use of this button to links that require significant visual contrast. Maybe one or two instances on your site could solicit the need for this button style:

Big button Link style

Secondary Button link

The Secondary Button link style can be applied to any link you have already created and can be found in the "Styles" dropdown in the editing tool. Use the Secondary Button style for any link that requires prominence, but not as much as a solid-color button. A Secondary Button could be one that provides a second option to users that may not be the primary user task. An example of this could be listing an "Apply" button using the default Button link style, followed by a "Learn more about admissions" button using the Secondary Button link style.

Secondary button link style

Normal Text Link style

This is the Normal Text Link style that will automatically appear after you have selected text and turned it into a link. Use the Normal Text Link style inside bodies of text, or as a link by itself.

Action Link style

The Action Link style ads additional visual indication of a link. We recommend using this style on a line of its own or in a list.

Action Link style with caret

Working with Buttons

By default, buttons added to a text area that are enclosed within the same paragraph tag (<p>) appear inline (on the same line). Through editing the text source code directly, experienced editors can modify the button layout further.

Inspecting and modifying Text Area source code

The text editor creates HTML code from the styles and text that you add to the editor. There may be times you'll need to fix mistakes and to edit the HTML directly. Here's how to view and edit the HTML source code.

  1.  Identify the Text Area you would like to modify, and click Edit.
  2. Create buttons as normal.
  3. Within the Body text toolbar, click Source to display your Text Area as HTML.
Screenshot illustrating Creating buttons and action links

Placing multiple buttons

On your Stanford site you can place multiple buttons inline and stacked.

Inline button example

  1. Type the button text for all of your buttons on one line, with a space between each button's text.
  2. Once all button text has been added on the same line, add the links and button styling.
  3. All of your buttons should now appear on one line.

Button 1 Button 2 Button 3

Stacking buttons

The spacing between stacked buttons appears differently depending on whether the buttons are enclosed within one paragraph tag ("<p>"), or separate paragraph tags. Stacked Buttons that are enclosed within separate <p> tags have more spacing, while buttons enclosed in one <p> tag have less spacing.

Option #1: Stacking buttons spaciously (enclosed in separate <p> tags)

  1. Type the button text for your first button, and press the enter/return key.
  2. Continue adding button text in this manner for all buttons you would like to be spaciously stacked together. Pressing the enter/return key ensures that additional buttons will be enclosed within their own paragraph.
  3. Once all button text has been added on separate lines, add the links and button styling.
  4. Buttons should now appear spaciously stacked.

Option #1 example

Example Button 1

Example Button 2

Example Button 3

Option #2: Stacking buttons closely (enclosed in one <p> tag)

  1. Type the button text for all of your buttons on one line, with a space between each button's text.
  2. Once all button text has been added on the same line, add the links and button styling.
  3. All of your buttons should now appear on one line.
  4. In the editor toolbar, select Source. This will change the editor from a WYSIWYG editor to an HTML editor.
  5. Add class="su-stack-button" to the initial paragraph tag. It should now look like this: 
<p class="su-stack-button">
  <a class="su-button" href="https://example.com">Example Button 1</a>     
  <a class="su-button" href="https://example.com">Example Button 2</a> 
  <a class="su-button" href="https://example.com">Example Button 3</a> 
</p>

Buttons should now appear closely stacked:

Example Button 1 Example Button 2 Example Button 3