gistfile1.phtml

<style type="text/css">
<!--
a.button {
  background: transparent url('/img/mailbox_button_a.png') no-repeat scroll top right;
  color: #444;
  display: block;
  float: left;
  width: 133px;
  height: 40px;
  font-size: 1.2em;
  font-weight: bold;
  margin-right: 6px;
  padding-right: 17px; /* sliding doors padding */
  text-decoration: none;
  margin-bottom: 3px;
}

a.button span.button {
    background: transparent url('/img/mailbox_button.png') no-repeat;
    display: block;
    line-height: 30px;
    padding: 5px 0 5px 18px;
}

a.button:hover {
    background: transparent url('/img/mailbox_button_active_a.png') no-repeat scroll top right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:hover span.button {
    background: transparent url('/img/mailbox_button_active.png') no-repeat;
    padding: 6px 0 5px 18px; /* push text down 1px */
}

span.badge {
  background: transparent url('/img/badge_a.png') no-repeat scroll top right;
  color: #FFFFFF;
  float: right;
  width: 15px;
  height: 20px;
  font-weight: bold;
  font-size: 0.8em;
  margin-top: 5px;
  padding-right: 10px; /* sliding doors padding */
  text-decoration: none;
  margin-bottom: 3px;
  text-align: right;
}

span.badge span {
    background: transparent url('/img/badge.png') no-repeat;
    font-weight: bold;
    display: block;
    line-height: 10px;
    padding: 5px 0 5px 6px;
}
-->
</style>

<a id="btn_inbox" class="button" title="Your inbox" href="#">
  <span class="button">
  <img border="0" src="/img/inbox_icon.png"/>
    Inbox
    <span class="badge">
      <span>52</span>
    </span>
  </span>
</a>