WiscWeb - Adding buttons

The following document will walk you through the process of adding styled buttons to your page or post using the button insert feature of the text editor.

Button best practices

  • Use buttons sparingly. Often, a single button is best.
  • Centering your button will give it more impact.
  • Limit the number of words in the button.
    • A short action word or phrase is ideal. Examples: "Download" or "Learn more"
    • Slightly longer phrases are okay, but avoid longer sentences if possible.
  • Avoid using buttons within a sentence; buttons should always be placed on their own line.
  • Stick to one, consistent set of button style options (see below) on your site.

Button style options

Colors

You currently have the option to choose between red and blue buttons:

Blue button with white text that reads "Help Info."
Small red button with white text that reads "Help Info."

Size

You currently have the option to choose between the small (default) and large sizes:

Default

Small blue button with white text that reads "Help Info."
Small red button with white text that reads "Help Info."

Large

Large blue button with white text that reads "Help Info."
Large red button with white text that reads "Help Info."

Style

You currently have the option to choose between standard (default) or reversed styles

Standard

Small blue button with white text that reads "Help Info."
Small red button with white text that reads "Help Info."

Reversed

Small blue reversed button with blue text that reads "Help Info."
Small red reversed button with red text that reads "Help Info."

Adding buttons

There are a couple ways that you can add a new button to your page:

Adding a button from scratch

  1. Navigate to the page or post that you'd like to edit
  2. In the text editor for the page element you wish to add the button to, make sure your cursor is on a new line
  3. Select the button icon from the text editor options. The option appears just after the hyperlink icon.



  4. A modal window will appear with some options

    The modal options menu allows you to choose color, size, style, text, and hyperlink for your button.

  5. Choose your preferred button color
  6. Choose your preferred size
  7. Choose if you want normal or reversed
  8. Type in the text you'd like for the button
  9. Paste or type in the URL for where you'd like the button to lead to
  10. Press Insert
  11. Your new button should now be added to your page/post

Making plain text into a button

  1. Navigate to the page or post that you'd like to edit
  2. In the text editor for the page element you wish to add the button to, highlight the text you would like to make into a button (make sure it is on its own line)
  3. Select the button icon from the text editor options

    If you've selected some text in the Text Block, the button options menu will automatically encourage you to add a hyperlink to the Link field.

  4. Choose your preferred button color
  5. Choose your preferred size
  6. Choose if you want normal or reversed
  7. The text you selected should auto-fill into the Text field, but you may edit it there, if needed
  8. Paste or type in the URL for where you'd like the button to lead to
  9. Press Insert
  10. Your new button should now be added to your page/post

Turning an existing link into a button

  1. Navigate to the page or post that you'd like to edit
  2. In the text editor for the page element you wish to add the button to, click to select the link you'd like to make into a button (make sure it is on its own line)
  3. Select the button icon from the text editor options
  4. Choose your preferred button color
  5. Choose your preferred size
  6. Choose your preferred style
  7. The text for the link should auto-fill into the Text field, but you may edit it there, if needed
  8. The URL for the link should also auto-fill into the Link field, but you may edit this, if needed

    The button options menu will auto-populate the Link field with the URL.

  9. Press Insert
  10. Your new button should now be added to your page/post

Video



Troubleshooting

  • If you do not provide button text or a URL, the button form will not insert and you will get an alert telling you to add the text / URL.

  • If you have not clicked somewhere in the text editor before clicking on the button icon, your new button will be added at the very top of the block of text.

  • If you would like to remove an existing button, highlight all of the text in the button and press the 'Delete' button on the keyboard.

  • To enter text below your button, put your cursor at the end of the button text and press the 'Enter' button on the keyboard.

  • If you have older buttons on your page that you placed using inline styles and HTML, we do recommend updating those to use this new way of styling buttons.


Keywords:
button, text editor, insert, add, display, link 
Doc ID:
110228
Owned by:
Jenna K. in WiscWeb
Created:
2021-04-13
Updated:
2024-07-01
Sites:
DoIT Help Desk, WiscWeb