Yahoo! Pure CSS

buttons.scss

.pure-button {
  display: inline-block;
  *display: inline;
  zoom: 1;
  line-height: normal;
  white-space: nowrap;
  vertical-align: baseline;
  text-align: center;
  cursor: pointer;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }
  font-family: inherit;
  font-size: 100%;
  *font-size: 90%;
  *overflow: visible;
  padding: .5em 1em;
  color: #444;
  color: rgba(0, 0, 0, 0.8);
  *color: #444;
  border: 1px solid #999;
  border: 0 rgba(0, 0, 0, 0);
  background-color: #E6E6E6;
  text-decoration: none;
  border-radius: 2px;
}

.pure-button-hover {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1)));
  background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.1));
  background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
}

.pure-button {
  &:hover {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1)));
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.1));
    background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
  }
  &:focus {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1)));
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.1));
    background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    outline: 0;
  }
}

.pure-button-active {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
}

.pure-button {
  &:active {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
  }
  &[disabled] {
    border: 0;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    filter: alpha(opacity = 40);
    -khtml-opacity: .4;
    -moz-opacity: .4;
    opacity: .4;
    cursor: not-allowed;
    box-shadow: none;
  }
}

.pure-button-disabled {
  border: 0;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  filter: alpha(opacity = 40);
  -khtml-opacity: .4;
  -moz-opacity: .4;
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
  &:hover, &:focus, &:active {
    border: 0;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    filter: alpha(opacity = 40);
    -khtml-opacity: .4;
    -moz-opacity: .4;
    opacity: .4;
    cursor: not-allowed;
    box-shadow: none;
  }
}

.pure-button-hidden {
  display: none;
}

.pure-button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.pure-button-primary, .pure-button-selected {
  background-color: #0078e7;
  color: #fff;
}

a {
  &.pure-button-primary, &.pure-button-selected {
    background-color: #0078e7;
    color: #fff;
  }
}