Support Home Button Nav

by Jordan Dayton

HTML

<div align="center"><img src="https://community.canvaslms.com/resources/statics/165451/Canvas%2B%252B%2BLogo%2Btransparent%2B-%2BLarge%2B-%2Bdark.png?a=1474391678751" style="width: 60%; height: auto;" />
</div>
<br />
<br />
<div id="button" class="button1">
            <a href="ENTER_LINK_URL_HERE" target="_blank">
                <div class="button-link link1">
                    <img class="icon" src="https://community.canvaslms.com/resources/statics/176812/01_home.png?a=1476903180122"/>
                    <span class="fonts light">HOME</span>
                </div>
            </a>
        </div>
<br />
<div id="button" class="button2">
            <a href="ENTER_LINK_URL_HERE" target="_blank">
                <div class="button-link link2">
                    <img class="icon" src="https://community.canvaslms.com/resources/statics/176812/02_teams.png?a=1476902528095"/>
                    <span class="fonts light">TEAMS</span>
                </div>
            </a>
        </div>
<br />
<div id="button" class="button3">
            <a href="ENTER_LINK_URL_HERE" target="_top">
                <div class="button-link link3">
                    <img class="icon" src="https://community.canvaslms.com/resources/statics/176812/03_kb.png?a=1476902633008"/>
                    <span class="fonts light">KNOWLEDGEBASE</span>
                </div>
            </a>
        </div>
<br />
<div id="button" class="button4">
            <a href="ENTER_LINK_URL_HERE" target="_top">
                <div class="button-link link4">
                    <img class="icon" src="https://community.canvaslms.com/resources/statics/176812/04_achievement.png?a=1476902709772"/>
                    <span class="fonts light">ACHIEVEMENT</span>
                </div>
            </a>
        </div>
<br />
<div id="button" class="button5">
            <a href="ENTER_LINK_URL_HERE" target="_top">
                <div class="button-link link5">
                    <img class="icon"...

CSS

body {
    color: #5e5e5e;
    font: 13px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    background-color: #;
    }

    #button {
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    border-radius: 5px;
    height: 60px;
    width: 100%;
    margin: 0 0 0 10;
    }
    
            .button1 {
            background-color: #BCE784; 
            }
            .button2 {
            background-color: #5DD39E; 
            }
            .button3 {
            background-color: #348AA7; 
            }
            .button4 {
            background-color: #525174; 
            }
            .button5 {
            background-color: #513B56; 
            }
    
    .button-link {
    font-size: 16px;
    text-align: center;
    padding-top: 20px;
    <--! If left aligned, use this: "padding-left: 15px;" -->
    height: 46px;
    }

    div.button-link:hover{
    cursor: pointer;
    border-radius: 5px;
    height: 41px;
    }
    
            div.link1:hover{
            background-color: #9ABE6D;
            }
            div.link2:hover{
            background-color: #4DAD82;
            }
            div.link3:hover{
            background-color: #2B7189;
            }
            div.link4:hover{
            background-color: #44435F;
            }
            div.link5:hover{
            background-color: #433147;
            }


    a:link {
    text-decoration: none;
    }
    
    .fonts {
    vertical-align: middle;
    color:#fff; 
    font-size:12pt; 
    padding-left: 5px;
    }
    .dark {
    color: #58585B;  
    }
    .light {
    color: #ffffff; 
    }
    
    
    .icon {
    vertical-align: top; 
    }