引数に色を指定するだけで作るcss3ボタンのmixin(要compass,scss環境)

例えば

<a class="btn">クリック!</a>

というHTMLに対し、

.btn {
  @include css3-button(red);
}

というcssを書くと、

このような赤いボタン、

.btn {
  @include css3-button(blue);
}

と書くと、

このように青いボタンが出る、
というmixinです。

引数にはどのような色も指定でき、その色をベースにしたcss3ボタンを瞬時に作ってくれます。

scssの@mixin、便利!

@mixin css3-button($base-color) {
  /* IE8以下対策でベースカラーを背景色に指定 */
  background: $base-color;
  /* 角丸を3px指定(compassのincludeでブラウザ間の差異を吸収) */
  @include border-radius(3px);
  /* box-shadowを指定(compassのincludeでブラウザ間の差異を吸収) */
  @include box-shadow
    (0px 1px 3px rgba(000,000,000,0.3),
    inset 0px 0px 1px rgba(255,255,255,0.5));
 /* text-shadowを指定(compassのincludeでブラウザ間の差異を吸収) */
  @include text-shadow
    (0px -1px 0px rgba(000,000,000,0.7),
    0px 1px 0px rgba(255,255,255,0.3));
  /* 背景色を指定(compassのincludeでブラウザ間の差異を吸収) */
  @include background-image(
    linear-gradient(
      /* グラデーション開始色・・・ベースカラーに白(#fff)を50%混合 */
      mix($base-color, #fff, 50%),
      /* 50%の位置まで徐々にベースカラーになる */
      $base-color 50%,
      /* 50%の位置でベースカラーに黒(#000)を60%混合したカラーでグラデーション開始 */
      mix($base-color, #000, 60%) 50%,
      /* ベースカラーと白(#fff)80%の割合で混合した色まで変化 */
      mix($base-color, #fff, 80%)
    )
  );
  /* ベースカラーに黒を8:2の割合で混合した色でborder(枠線)をつける */
  border: 1px solid mix($base-color, #000, 80%);
  color: white;
  display: block;
  padding: 6px 10px;
  text-decoration: none;

  &:hover {
  /* box-shadowのinsetを明るく大きくし、rolloverを表現 */
    @include box-shadow
      (0px 1px 3px rgba(000,000,000,0.3),
      inset 0px 0px 15px rgba(255,255,255,0.6));
   /* ベースカラーでborder(枠線)をつける */
    border: 1px solid $base-color;
  }
}

jsdo.itでのデモ
http://jsdo.it/dentaq/hKLv

Githubにも上げておきました。