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