For this installment of “How to Canvas” let’s take a look at a simple technique to convert the appearance of a link into a button. This can be done by adding a snippet of code into the HTML of the link.
Start out on a page in Canvas, with one or more links created as you normally would.
- Edit the page.
- Switch to the HTML Editor.
- Locate the a tag for the link you wish to convert. (This may require some searching; try searching for the text of the link, the HTML tag you want should be just to the left of the link text.)
- Insert this into the a tag: class=”btn btn btn-large” style=”width: 200px;”
- Ensure that the a tag now shows something like “<a class=”btn btn btn-large” style=”width: 200px;” title=”text” href=”address” data-api-endpoint=”address” data-api-returntype=”Page”>”.
- Save the page you are working on.
The style does not display in the editor, but when you save the page and see it outside of the Edit view, you should see a button where the link used to appear.
Incidentally, that last bit in the code about “width: 200px;” is what defines how wide the button appears. (The “200px” is indicating that the button should be two hundred pixels wide.) Feel free to adjust that number from 200 to something which works better on your page. (Or switch out the “200px” part with a percentage (e.g. “15%”), which would make the button appear wider on wider screens.) This may require a bit of trial-and-error changes before you get things just the way you wish.
If the link you modified is to another page/quiz/discussion/assignment within your Canvas course, the text on the button will appear normally. If the link is to a file within your Canvas course, unless you disable it the Preview icon will appear on the button. And if the link is to an external web site, the Open in new window icon will appear on the button. After all, it may look like a button, but really it’s just a link, so it displays the extra icons just like it did before you made it into a button.
Finally, if you decide you want the buttons to be side-by-side, just make the links that way on the page. I would suggest placing at least one space between the links though, so the buttons don’t appear run together.