Button CSS

gistfile1.css

/* TEMPLATE HTML
<a href="#" class="button orange">
  <span class="corner_left"></span>
  <span class="corner_right">
    <span class="text">Connexion</span>
  </span>
</a>

TEMPLATE IMAGE
<##
###################>
<**
*******************>

*/

/* ************************** */
/* DEFAULT */
/* ************************** */

.ie7 .button, .ie6 .button {
  position: relative;
  top: 5px;
}

.button {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  text-decoration: none;
  font-size: 16px;
  line-height: 24px;
  margin: 0 5px;
  position: relative;
  bottom: 3px;
  cursor: pointer;
}
.button {  *display: inline; }

.button .corner_left, .button .corner_right, .button .text {
  display: block;
  float: left;
  background-color: transparent;
  background-repeat: no-repeat;
}
.button .text {  color: #fff; }

.button .corner_left        {  background-position: left top;     }
.button .corner_right       {  background-position: right top;    }

.button:hover .corner_left  {  background-position: left bottom;  }
.button:hover .corner_right {  background-position: right bottom; }

/*  COLOR */
.button.orange {
  font-size: 15px;
  line-height: 24px;
  color: #fff;
}
.button.orange:hover {
  color: #fff;
}
.button.orange .text {
  text-shadow: #d06600 1px 1px 0;
}
.button.orange .corner_left {
  width: 10px;
}
.button.orange .corner_right {
  padding-right: 10px;
}
.button.orange .corner_right, .button.orange .corner_left {
  height: 24px;
  background-image: url(/images/site/buttons/orange.png);
}