Website Development Resources
CHouseLive

• These css styled buttons are accessable even when images are disabled

<div class="button">
  <a title="button" href="#nogo">
    <em title="button">
      <img alt="button" src="images/image.png" class="pl" />
    </em>
    <span>button</span>
  </a>
</div>

.button {
  width: 128px;
  height: 128px;
  position: relative;
  padding: 0;
  margin: 0;
}

.button a {
  text-decoration: none;
}

.button a:hover {
  background: transparent;
  font-weight: normal;
}

.button em {
  display: block;
  width: 128px;
  height: 128px;
  position: absolute;
  top: 0;
  left: 0;
  border: 2px outset #303030;
  background: url(images/image.png) bottom;
}

.button a:hover em {
  border: 2px inset #303030;
  background: url(images/image.png) top;
}

.button span {
  position: absolute;
  visibility: visible;
  margin: 0 auto;
  top: 135px;
  left: 0;
  display: block;
  width: 128px;
  white-space: nowrap;
  font-style: normal;
  line-height: 25px;
  vertical-align: middle;
  text-align: center;
  height: 25px;
  color: #ffffff;
  border: 2px outset#303030;
  background-color: #000;
}

.button a:hover span {
  color: #000000;
  border: 2px inset #303030;
  background-color: #ffffff;
}

.pl {display:none;}

If you have encountered a problem with this demonstration, or would like an amendment made to the referencing and attributions of the scripts and code used on this page, please send the CHouseLive team an email: cara_remove_@chouselive_remove_.org