[ARCHIVED] Buttons on Canvas Pages

[adam_b_nemeroff]

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?

[sbastian]

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.

[adam_b_nemeroff]

Thanks!

Adam

[kblack]

 @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]

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]

I just saw this as well. Thanks everyone!

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

Adam

[awebster · Accepted solution]

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:

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>

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>

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>

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>

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>

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>

[Stef_retired]

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]

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

[awebster]

Done.

[jan_skvaril]

Hi, how can the text in larger buttons be aligned vertically to the middle?