Skip to main content Skip to secondary navigation

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.

For basic instructions on adding buttons, see How do I add styling to my links?.

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.
Source button

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 example

Inline button source code

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

Spaciously Stacked Buttons 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

Closely Stacked Buttons

Option #2 example Source code

Closely Stacked Buttons 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 linksbutton styling, and "su-stack-button" class.