Menu bar with different colored div buttons

button colors change as you hover over the button

by Jordan Dayton

HTML

<br />
<br />
<div align="center"><img src="https://community.canvaslms.com/resources/statics/124206/Canvas%2BRed%2BLogo%2B-%2BWhite%2Btext%2B-%2Btransparent.png?a=1466647368278" style="width: 60%; height: auto;" />
</div>
<br />
<br />
<div id="button" class="button1">
            <a href="https://instructure.okta.com/" target="_blank">
                <div class="button-link link1">
                    <img class="icon" src="https://community.canvaslms.com/resources/statics/131088/int.concur.png?a=1473975995792"/>
                    <span class="fonts">Home</span>
                </div>
            </a>
        </div>
<br />
<div id="button" class="button2">
            <a href="https://nebasilicon.fdecs.com/eCustService/" target="_blank">
                <div class="button-link link2">
                    <img class="icon" src="https://community.canvaslms.com/resources/statics/131088/int.svb.png?a=1473976008371"/>
                    <span class="fonts">Analyze & Plan</span>
                </div>
            </a>
        </div>
<br />
<div id="button" class="button3">
            <a href="https://instructure.atlassian.net/servicedesk/customer/portal/17" target="_top">
                <div class="button-link link3">
                    <img class="icon" src="https://community.canvaslms.com/resources/statics/131088/int.procurement.png?a=1473979312465"/>
                    <span class="fonts">Design & Develop</span>
                </div>
            </a>
        </div>
<br />
<div id="button" class="button4">
            <a href="https://instructure.atlassian.net/servicedesk/customer/portal/17" target="_top">
                <div class="button-link link4">
                    <img class="icon" src="https://community.canvaslms.com/resources/statics/131088/int.procurement.png?a=1473979312465"/>
                    <span class="fonts">Deploy & Engage</span>
                </div>
            </a>
        </div>
<br />
<div id="button" class="button5">
          ...

CSS

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

    #button {
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    border-radius: 5px;
    height: 60px;
    width: 90%;
    margin: 0 0 0 10;
    }
    
            .button1 {
            background-color: #58585B; 
            }
            .button2 {
            background-color: #246792; 
            }
            .button3 {
            background-color: #209F62; 
            }
            .button4 {
            background-color: #E55D2E; 
            }
            .button5 {
            background-color: #E5942E; 
            }
    
    .button-link {
    font-size: 16px;
    color: #ffffff;
    text-align: left;
    padding-top: 17px;
    padding-left: 15px;
    height: 46px;
    }

    div.button-link:hover{
    cursor: pointer;
    border-radius: 5px;
    height: 44px;
    }
    
            div.link1:hover{
            background-color: #7d7d82;
            }
            div.link2:hover{
            background-color: #3D789E;
            }
            div.link3:hover{
            background-color: #3CAC76;
            }
            div.link4:hover{
            background-color: #F77F56;
            }
            div.link5:hover{
            background-color: #F7B056;
            }


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