# ボタン

レギュラー フラット

    <a href="#" class="%{STYLEGUIDE_PAGE}-btn">レギュラー</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-flat">フラット</a>

# 管理画面用ボタン

デフォルト Primary Info Danger 保存用 検索用

    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-admin">デフォルト</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-admin %{STYLEGUIDE_PAGE}-btn-admin-primary">Primary</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-admin %{STYLEGUIDE_PAGE}-btn-admin-info">Info</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-admin %{STYLEGUIDE_PAGE}-btn-admin-danger">Danger</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-admin %{STYLEGUIDE_PAGE}-btn-admin-primary %{STYLEGUIDE_PAGE}-btn-admin-save">保存用</a>
    	<a href="#" class="%{STYLEGUIDE_PAGE}-btn-admin %{STYLEGUIDE_PAGE}-btn-admin-info %{STYLEGUIDE_PAGE}-btn-admin-search">検索用</a>

## デフォルトのボタン

### ボタンの色

デフォルト Primary Info Success Warning Danger Link

    <a href="#" class="%{STYLEGUIDE_PAGE}-btn">デフォルト</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn %{STYLEGUIDE_PAGE}-btn-primary">Primary</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn %{STYLEGUIDE_PAGE}-btn-info">Info</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn %{STYLEGUIDE_PAGE}-btn-success">Success</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn %{STYLEGUIDE_PAGE}-btn-warning">Warning</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn %{STYLEGUIDE_PAGE}-btn-danger">Danger</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn %{STYLEGUIDE_PAGE}-btn-link">Link</a>

### 各HTML要素にボタン

- リンク
- ボタン
- インプット
- サブミット

リンク

    <a class="%{STYLEGUIDE_PAGE}-btn" href="#">リンク</a>
    <button class="%{STYLEGUIDE_PAGE}-btn" type="submit">ボタン</button>
    <input class="%{STYLEGUIDE_PAGE}-btn" type="button" value="インプット">
    <input class="%{STYLEGUIDE_PAGE}-btn" type="submit" value="サブミット">

### ボタンの動き

regular hover active

    <a href="#" class="%{STYLEGUIDE_PAGE}-btn">regular</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn %{STYLEGUIDE_PAGE}-btn-hover">hover</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn %{STYLEGUIDE_PAGE}-btn-active">active</a>

### ボタンの大きさ

用意したもの4種類

- 小さいサイズ
- 通常サイズ
- 大きいサイズ
- 全幅のサイズ

小さいサイズ 通常サイズ 大きいサイズ

    <a href="#" class="%{STYLEGUIDE_PAGE}-btn %{STYLEGUIDE_PAGE}-btn-small">small</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn">normal</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn %{STYLEGUIDE_PAGE}-btn-large">large</a>

    <button type="button" class="%{STYLEGUIDE_PAGE}-btn %{STYLEGUIDE_PAGE}-btn-block">全幅のサイズ</button>

### 押せないボタン

- 属性が`disabled`
- クラス名が`.%{STYLEGUIDE_PAGE}-btn-disabled`のもの

クラス名がdisabled

    <button type="button" class="%{STYLEGUIDE_PAGE}-btn" disabled="disabled">disabled</button>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn %{STYLEGUIDE_PAGE}-btn-disabled">クラス名がdisabled</a>

## フラットボタン

### ボタンの色

デフォルト Primary Info Success Warning Danger

    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-flat">デフォルト</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-flat %{STYLEGUIDE_PAGE}-btn-flat-primary">Primary</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-flat %{STYLEGUIDE_PAGE}-btn-flat-info">Info</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-flat %{STYLEGUIDE_PAGE}-btn-flat-success">Success</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-flat %{STYLEGUIDE_PAGE}-btn-flat-warning">Warning</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-flat %{STYLEGUIDE_PAGE}-btn-flat-danger">Danger</a>

### 各HTML要素にボタン

- リンク
- ボタン
- インプット
- サブミット

リンク

    <a class="%{STYLEGUIDE_PAGE}-btn-flat" href="#">リンク</a>
    <button class="%{STYLEGUIDE_PAGE}-btn-flat" type="submit">ボタン</button>
    <input class="%{STYLEGUIDE_PAGE}-btn-flat" type="button" value="インプット">
    <input class="%{STYLEGUIDE_PAGE}-btn-flat" type="submit" value="サブミット">

### ボタンの動き

デフォルト hover active

    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-flat">regular</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-flat %{STYLEGUIDE_PAGE}-btn-hover">hover</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-flat %{STYLEGUIDE_PAGE}-btn-active">active</a>

### ボタンの大きさ

用意したもの4種類

- 小さいサイズ
- 通常サイズ
- 大きいサイズ
- 全幅のサイズ

小さいサイズ 通常サイズ 大きいサイズ

    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-flat %{STYLEGUIDE_PAGE}-btn-small">小さいサイズ</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-flat">通常サイズ</a>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-flat %{STYLEGUIDE_PAGE}-btn-large">大きいサイズ</a>

    <button type="button" class="%{STYLEGUIDE_PAGE}-btn-flat %{STYLEGUIDE_PAGE}-btn-block">全幅のサイズ</button>

### 押せないボタン

- 属性が`disabled`
- クラス名が`.%{STYLEGUIDE_PAGE}-btn-disabled`

クラス名がdisabled

    <button type="button" class="%{STYLEGUIDE_PAGE}-btn-flat" disabled="disabled">属性がdisabled</button>
    <a href="#" class="%{STYLEGUIDE_PAGE}-btn-flat %{STYLEGUIDE_PAGE}-btn-disabled">クラス名がdisabled</a>