beautons.cssを使うことで、画像不使用のBootstrap風のフラットできれいなボタンを簡単に実装できます。<head>で「beautons.css」を次のように読み込んでおき、

<link href="css/beautons.css" rel="stylesheet">
後は、ボタンを設定する要素にclass指定するだけです。

基本になるボタンとその他のサイズのclass指定

ボタンA1(基本):「class="btn"」、ボタンA2:「class="btn btn--small"」、ボタンA3:「class="btn btn--large"」、ボタンA4:「class="btn btn--huge"」、ボタンA5:「class="btn btn--full"」

ボタンA1ボタンA2 ボタンA3 ボタンA4

ボタンA5

ボタンの色

ボタンの色は、styleで指定します。
ボタンB1:style="background:green;"、ボタンB2:style="background:deeppink;"、ボタンB3:style="background:#191970;"、ボタンB4:style="background:#7a107a;"

ボタンB1 ボタンB2 ボタンB3 ボタンB4

フォントのサイズ

フォントサイズは、classで指定します。フォントサイズに合わせて、ボタンもサイズが変わります。
ボタンC1:「class="btn btn--alpha"」、ボタンC2:「class="btn btn--beta"」、ボタンC3:「class="btn btn--gamma"」

ボタンC1 ボタンC2 ボタンC3

ファンクション用ボタン

ファンクション用ボタンは、classで指定します。
ボタンD1(ダウンロードやログインなど):「class="btn btn--positive"」、
ボタンD2(削除やunfriendなど):「class="btn btn--negative"」、
ボタンD3(無効なボタン):class=「"btn btn--inactive"」

ボタンD1 ボタンD2 ボタンD3

ボタンのスタイル

ボタンの角丸を、classで指定して2パターン追加できます。
ボタンE1(より丸く):「class="btn btn--soft"」、
ボタンE2(丸みをごく少なく):「class="btn btn--hard"」

ボタンE1 ボタンE2

ボタンの組み合わせなど

ボタンの構成要素であるclassを組み合わせることで、バリエーションを増やすことができます。
ボタンF1:「class="btn btn--large btn--positive"」、
ボタンF2:「class="btn btn--negative btn--full btn--soft"」
ボタンF3(文章の中でボタンを表す場合):「class="btn btn--natural"」

ボタンF1 ボタンF2

ボタンF3 「A  button  in a paragraph」
※引用、参考:https://github.com/csswizardry/beautons/
戻るボタン