/
HTML Canvas Module Buttons Template

HTML Canvas Module Buttons Template

HTML Canvas Module Buttons Template – Created by Marisa Hadley – Last Updated 7/14/2021

For a more in-depth walkthrough of how to use this template for your Canvas homepage, please reference this video.

If you have any questions, concerns, or suggestions for improvement, please reach out to the Albertsons Library MakerLab or marisa.hadley@u.boisestate.edu.

Instructions

Link to Original Document: HTML Canvas Module Buttons Template

HTML Button with Image Background

<div style="margin: auto; width: 100%;">

<div style="float: left; border: 2px solid white; background-color: #HEX COLOR CODE; background-image: url('IMAGE ADDRESS'); background-repeat: no-repeat; width: 150px; height: 125px; cursor: pointer; padding: 3.5px; margin: 5px; text-align: center; position: relative; background-position: top;">

<a style="padding: 10px 10px; color: white; font-size: 18px; line-height: 20px; position: absolute; top: 30%; left: 10%;" title="MODULE TITLE" href="MODULE URL"><strong>BUTTON TEXT</strong></a>

</div>

[ADDITIONAL BUTTONS GO HERE]

</div>


HTML Button without Image Background

<div style="margin: auto; width: 100%;">

<div style="float: left; border: 2px solid white; background-color: #HEX COLOR CODE; width: 150px; height: 125px; cursor: pointer; padding: 3.5px; margin: 5px; text-align: center; position: relative; background-position: top;">

<a style="padding: 10px 10px; color: white; font-size: 18px; line-height: 20px; position: absolute; top: 30%; left: 10%;" title="MODULE TITLE" href="MODULE URL"><strong>BUTTON TEXT</strong></a>

       </div>

[ADDITIONAL BUTTONS GO HERE]

</div>


Relevant Information

Have a suggestion?

Email us! lts@boisestate.edu

Related Articles

https://docs.google.com/document/d/1jo-5tNoePZ_y58b7W9TQZtv6Dvo3FAOUDkdZq9egSEg/edit

Related content

Sending Announcements
Sending Announcements
Read with this
Creating Accessible Links in Canvas
Creating Accessible Links in Canvas
More like this
Canvas to Canvas Course Import (course copy)
Canvas to Canvas Course Import (course copy)
Read with this
Canvas Syllabus
More like this
Canvas Course Setup
Canvas Course Setup
Read with this