既定のボタン
Pure ボタンを作成するには、<a> または <button> 要素に pure-button クラス名を追加します。
<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>無効なボタン
ボタンを無効化にマークするには、pure-button とともに pure-button-disabled クラス名を追加します。または、「disabled」属性をボタンに直接追加することもできます。
<button class="pure-button pure-button-disabled">A Disabled Button</button>
<button class="pure-button" disabled="">A Disabled Button</button>アクティブ ボタン
ボタンを「押された」ようにスタイル設定するには、pure-button とともに pure-button-active クラス名を追加します。
<a class="pure-button pure-button-active" href="#">An Active Button</a>
<button class="pure-button pure-button-active">An Active Button</button>プライマリ ボタン
ボタンが主要なアクションを表すことを示すには、pure-button とともに pure-button-primary クラス名を追加します。
<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>ボタンのカスタマイズ
Pure のミニマルなスタイル設定のおかげで、一般的な Pure ボタンを基にして簡単に構築し、独自のアプリケーション用にカスタマイズされたボタンを作成できます。
ボタンのスタイルをカスタマイズするには、button-foo などのクラスにカスタム CSS をグループ化してから、既に pure-button クラス名を持っている要素に追加します。次に例を示します。
角が丸いカラーボタン
<div>
<style>
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65);
/* this is a green */
}
.button-error {
background: rgb(202, 60, 60);
/* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20);
/* this is an orange */
}
.button-secondary {
background: rgb(66, 184, 221);
/* this is a light blue */
}
</style>
<button class="button-success pure-button">Success Button</button>
<button class="button-error pure-button">Error Button</button>
<button class="button-warning pure-button">Warning Button</button>
<button class="button-secondary pure-button">Secondary Button</button>
</div>さまざまなサイズのボタン
<div>
<style>
.button-xsmall {
font-size: 70%;
}
.button-small {
font-size: 85%;
}
.button-large {
font-size: 110%;
}
.button-xlarge {
font-size: 125%;
}
</style>
<button class="button-xsmall pure-button">Extra Small Button</button>
<button class="button-small pure-button">Small Button</button>
<button class="pure-button">Regular Button</button>
<button class="button-large pure-button">Large Button</button>
<button class="button-xlarge pure-button">Extra Large Button</button>
</div>アイコン付きボタン
Pure にはアイコンフォントは付いていませんが、既存のものと連携することができます。Pure ボタンにアイコンフォントを組み込むのは簡単です。次の例では、Font Awesome からアイコンフォントを使用します。ページに Font Awesome CSS ファイル を配置し、pure-button 要素内で <i> 要素を使用します。
<button class="pure-button">
<i class="fa fa-cog"></i>Settings
</button>
<a class="pure-button" href="#">
<i class="fa fa-shopping-cart fa-lg"></i>Checkout
</a>ボタングループ
複数のボタンを 1 行にグループ化します。
<div class="pure-button-group" role="group" aria-label="...">
<button class="pure-button">A Pure Button</button>
<button class="pure-button">A Pure Button</button>
<button class="pure-button pure-button-active">A Pure Button</button>
</div>