Buttons on Canvas Pages

Jump to solution
adam_b_nemeroff
Community Novice

I was trying to play around with buttons on a syllabus home page.

I would love to use some of these guys (not requiring global JS edits) in Canvas pages: Canvas LMS

When I try to submit them, the buttons are scrubbed out.  Why is this?  Are they not whitelisted even though they're in the style guide?

1 Solution
awebster
Community Contributor

For what it's worth, here's what I have just in case you want a little more.

The following codes will allow you to add custom buttons to your pages.

To add a button:

  1. First add the text of your button (for example: Course Home Page).
  2. Add your link to the text using the 'Insert Content into the Page (Links to an external site.)' tool.
  3. Use the HTML Editor link to switch to HTML view.
  4. Find the <a tag and add the code highlighted in yellow (depending on which type of button you want).

Example Buttons:

PlainButton.png

This is what the code looks like after I add the text and link:

<a title="Front Page" href="https://community.canvaslms.com/courses/346426/pages/front-page">Plain Button</a></p>

This is what the code looks like after I add the HTML code for the button:

<a class="btn" title="Front Page" href="https://community.canvaslms.com/courses/346426/pages/front-page" data-api-endpoint="https://weber.instructure.com/api/v1/courses/346426/pages/front-page" data-api-returntype="Page">Plain Button</a></p>

PrimaryButton.png

This is what the code looks like after I add the text and the link:

<p><a title="Front Page" href="https://community.canvaslms.com/courses/346426/pages/front-page">Primary Button</a></p>

This is what the code looks like after I add the HTML code for the button:

<p><a class="btn btn-primary" title="Front Page" href="https://community.canvaslms.com/courses/346426/pages/front-page" data-api-endpoint="https://weber.instructure.com/api/v1/courses/346426/pages/front-page" data-api-returntype="Page">Primary Button</a></p>

InfoButton.png

This is what the code looks like after I add the text and the link:

<p><a title="Front Page" href="https://community.canvaslms.com/courses/346426/pages/front-page">Info Button</a></p>

This is what the code looks like after I add the HTML code for the button:

<p><a class="btn btn-info" title="Front Page" href="https://community.canvaslms.com/courses/346426/pages/front-page" data-api-endpoint="https://weber.instructure.com/api/v1/courses/346426/pages/front-page" data-api-returntype="Page">Info Button</a></p>

SuccessButton.png

This is what the code looks like after I add the text and the link:

<p><a title="Front Page" href="https://community.canvaslms.com/courses/346426/pages/front-page">Success Button</a></p>

This is what the code looks like after I add the HTML code for the button:

<p><a class="btn btn-success" title="Front Page" href="https://community.canvaslms.com/courses/346426/pages/front-page" data-api-endpoint="https://weber.instructure.com/api/v1/courses/346426/pages/front-page" data-api-returntype="Page">Success Button</a></p>

WarningButton.png

This is what the code looks like after I add the text and the link:

<p><a title="Front Page" href="https://community.canvaslms.com/courses/346426/pages/front-page">Warning Button</a></p>

This is what the code looks like after I add the HTML code for the button:

<p><a class="btn btn-warning" title="Front Page" href="https://community.canvaslms.com/courses/346426/pages/front-page" data-api-endpoint="https://weber.instructure.com/api/v1/courses/346426/pages/front-page" data-api-returntype="Page">Warning Button</a></p>

InverseButton.png

This is what the code looks like after I add the text and the link:

<p><a title="Front Page" href="https://community.canvaslms.com/courses/346426/pages/front-page">Inverse Button</a></p>

This is what the code looks like after I add the HTML code for the button:

<p><a class="btn btn-inverse" title="Front Page" href="https://community.canvaslms.com/courses/346426/pages/front-page" data-api-endpoint="https://weber.instructure.com/api/v1/courses/346426/pages/front-page" data-api-returntype="Page">Inverse Button</a></p>

View solution in original post