Standard Buttons

Small Example

HTML:
<a href="#" class="button small black">Black</a>

Medium Example

HTML:
<a href="#" class="button medium black">Black</a>

Large Example

HTML:
<a href="#" class="button large black">Black</a>

CSS3 Buttons: Gradients, Transition, Box & Text Shadow

Small Example

HTML:
<a href="#" class="button small gradient black">Black</a>

Medium Example

HTML:
<a href="#" class="button medium gradient black">Black</a>

Large Example

HTML:
<a href="#" class="button large gradient black">Black</a>

Adding Rounded Corners

もし、角丸ボタンにしたい場合は、classファイルに、rnd5,rnd8,rnd10,rud12 という指定をしてください。 classに、radを、付け加えるだけで簡単に、角丸にできます。

Standard Button:

Normal:
Black
<a href="#" class="button large black">Black</a>
With Rounded Corners:
Black
<a href="#" class="button large black rnd8">Black</a>

With Gradient:

Normal:
Black
<a href="#" class="button large gradient black">Black</a>
With Rounded Corners:
Black
<a href="#" class="button large gradient black rnd8">Black</a>

あなたが、独自のStylesheetを書く場合、下記のソースをコピーして、costom.cssとして使用することもできます。

.button{-moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px;}

角丸ボタンにしたい場合は、border-radius の、px数を調整することで可能です。