Add button-styled links

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

Your Stanford site 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 Add link to text)
2. Select the text that you have already turned into a link.
3. From the Style dropdown in the Text Area toolbar, select a link style of your choice (some styles include Button, Big Button, Secondary Button, and Action Link).
4. Save.

 

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

After — and only after you have created a text link, you can also apply the Action Link style for additional visual indication of a link, that is not inside a body of the text:

Action Link style with caret

The Action Link style is meant to increase the visual indication of a link to a user, and is meant to be used on a line by itself, like the above, or as a list of links, like this: 

• Action Link style with caret
• Action Link style with caret
• Action Link style with caret

 

Working with Buttons

By default, buttons added to the WYSIWYG or Editor in the Text Area paragraph 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.

Placing buttons inline

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.

Inline button example

Inline button source code

Notice how all of the button code is enclosed within one paragraph (between an opening <p> and a closing </p>)

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 #1 example Source code

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 read <p class="su-stack-button">.
6. Buttons should now appear closely stacked.

Option #2 example

Option #2 example Source code

Horizontal Alignment with Option #2

You may encounter an issue with your buttons if you attempt to change their horizontal alignment (e.g. align-right, center, align-left) after the button has been created and modified to stack closely. To fix this issue, make sure to add your desired horizontal alignment BEFORE adding the links, button styling, and "su-stack-button" class.

 

Multi-button alignment

Align Left

 

button 1 button 2 button 3button 1 button 2 

Align Center

 

button 1 button 2 button 3button 1 button 2 

Align Right

 

button 1 button 2 button 3button 1 button 2