HTML Canvas Module Buttons Template
- Maria Shimel
HTML Canvas Module Buttons Template – Created by Marisa Hadley – Last Updated 7/14/2021
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