cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
adam_b_nemeroff
Community Participant

Buttons on Canvas Pages

Jump to solution

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

Accepted Solutions
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

9 Replies
sbastian
Community Participant

Hi Adam,

In the Pre-Conference session, I Dreamed a Dream: Creative Creation in Canvas, I remember learning that to use the buttons in the style sheet, you have to replace the <button> tag with <a>. I think. I need to find my notes on this.

kblack
Community Champion

 @sbastian ​ is correct,  @adam_b_nemeroff     ...basically you put the <a> right before the class  But here I was going to offer my own HTML, and I just realized that it apparently reflects an older class type.  Here, for example, is what I just used in a page HTML editor to direct students to the Syllabus page.  I just tried it myself on a sample course site and it worked fine:

<a href="https://community.canvaslms.com/courses/xxxxxx/assignments/syllabus"><div class="btn" type="button">Click here to go to Syllabus </div></a>

Interesting, though.  I used the class "btn" that I got from older documentation rather than "button" that is indicated in the new documentation that you reference in your message.  Using the class="button" did NOT work for me, and (as you originally stated) stripped away the button altogether and left me with only a hyperlink. Anyone else know what's going on with this?

mpoole
Community Participant

The styleguide elements do not always work in the editor-- sometimes they require modification of the global javascript.  My understanding is that this is because the styleguide is for the development of canvas itself, rather than of individual course content.

In any case, I haven't had to add the a tag that Susan Bastian mentioned.  When I use buttons, I add the code from the style guide into the html editor: (for example)  <div class="Button Button--primary">button text</div>

Then I switch back to the RCE.  In the RCE I don't see the button, just the text.  I add links to that text using the insert content menu on the right or the hyperlink icon in the toolbar.  When I save the page, the button appears and works.

adam_b_nemeroff
Community Participant

I just saw this as well. Thanks everyone!

Button colors are mixed in their ability to be used too. FYI.

Adam

Thanks!

Adam

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

awebster​, thank you for this wonderful and clear guide to creating buttons with HTML. I'm going to add a link to this portion of the discussion to the section of the Creating an inviting course home page blog that discusses adding buttons to pages.

kona
Community Coach
Community Coach

awebster​, could you also add this to the Canvas Hacks course?

awebster
Community Contributor

Done.