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
- Button style options
- Adding buttons to a page
- Help video
- Troubleshooting tips
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:
Size
You currently have the option to choose between the small (default) and large sizes:
Default
Large
Style
You currently have the option to choose between standard (default) or reversed styles
Standard
Reversed
Adding buttons
There are a couple ways that you can add a new button to your page:
Adding a button from scratch
- Navigate to the page or post that you'd like to edit
- In the text editor for the page element you wish to add the button to, make sure your cursor is on a new line
- Select the button icon from the text editor options. The option appears just after the hyperlink icon.
- A modal window will appear with some options
- Choose your preferred button color
- Choose your preferred size
- Choose if you want normal or reversed
- Type in the text you'd like for the button
- Paste or type in the URL for where you'd like the button to lead to
- Press Insert
- Your new button should now be added to your page/post
Making plain text into a button
- Navigate to the page or post that you'd like to edit
- 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)
- Select the button icon from the text editor options
- Choose your preferred button color
- Choose your preferred size
- Choose if you want normal or reversed
- The text you selected should auto-fill into the Text field, but you may edit it there, if needed
- Paste or type in the URL for where you'd like the button to lead to
- Press Insert
- Your new button should now be added to your page/post
Turning an existing link into a button
- Navigate to the page or post that you'd like to edit
- 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)
- Select the button icon from the text editor options
- Choose your preferred button color
- Choose your preferred size
- Choose your preferred style
- The text for the link should auto-fill into the Text field, but you may edit it there, if needed
- The URL for the link should also auto-fill into the Link field, but you may edit this, if needed
- Press Insert
- 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.