NEW BUTTON NAV

hover depression of buttons

by Jordan Dayton

HTML

<!-- CANVAS LOGO
<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 class="button button1">
  <a href="ENTER_LINK_URL_HERE" target="_blank">
    <div class="button-link link1">
      <img class="icon" src="https://maxcdn.icons8.com/windows8/PNG/26/Gaming/knight-26.png" title="Knight" width="26" />
      <span class="fonts">Home</span>
    </div>
  </a>
</div>
<br />
<div class="button button2">
  <a href="ENTER_LINK_URL_HERE" target="_blank">
    <div class="button-link link2">
      <img class="icon" src="https://maxcdn.icons8.com/windows8/PNG/26/Business/collaboration-26.png" title="Collaboration" width="26" style="color:white;" />
      <span class="fonts">Analyze & Plan</span>
    </div>
  </a>
</div>
<br />
<div class="button button3">
  <a href="ENTER_LINK_URL_HERE" target="_top">
    <div class="button-link link3">
      <img class="icon" src="https://maxcdn.icons8.com/windows8/PNG/26/Transport/construction_worker-26.png" title="Construction Worker" width="26" />
      <span class="fonts">Design & Develop</span>
    </div>
  </a>
</div>
<br />
<div class="button button4">
  <a href="ENTER_LINK_URL_HERE" target="_top">
    <div class="button-link link4">
      <img class="icon" src="https://maxcdn.icons8.com/windows8/PNG/26/Computer_Hardware/under_computer-26.png" title="Under Computer" width="26" />
      <span class="fonts">Deploy & Engage</span>
    </div>
  </a>
</div>
<br />
<div class="button button5">
  <a href="ENTER_LINK_URL_HERE" target="_top">
    <div class="button-link link5">
      <img class="icon" src="https://maxcdn.icons8.com/windows8/PNG/26/Plants/hand_planting-26.png" title="Hand Planting" width="26" />
      <span class="fonts">Sustain & Grow</span>
    </div>
  </a>
</div>

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: 90%;
  margin: 0 0 0 10;
}
        .button1 {
          background-color: #58585B;
        }
        .button2 {
          background-color: #246792;
        }
        .button3 {
          background-color: #E55D2E;
        }
        .button4 {
          background-color: #E5942E;
        }
        .button5 {
          background-color: #209F62;
        }

div.button:hover {
  filter: Alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

.button-link {
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  padding-top: 20px;
  <--! If left aligned,
  use this: "padding-left: 15px;" --> height: 46px;
}

a:link {
  text-decoration: none;
}

.fonts {
  vertical-align: middle;
  color: #fff;
  font-size: 12pt;
  padding-left: 5px;
}

.icon {
  vertical-align: top;
  margin-top: -4px;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}