# ボタン

用意したもの3種類

- 立体感のあるボタン
- フラットのボタン
- アクアのボタン

regularなボタン flatなボタン aquaなボタン

    <a href="#" class="acms-btn">regularなボタン</a>
    <a href="#" class="acms-btn-flat">flatなボタン</a>
    <a href="#" class="acms-btn-aqua">auaなボタン</a>

# 管理画面用ボタン

デフォルトのボタン primaryなボタン infoなボタン dangerなボタン smallなボタン 保存用

    <a href="#" class="acms-btn-admin">デフォルトのボタン</a>
    <a href="#" class="acms-btn-admin acms-btn-admin-primary">primaryなボタン</a>
    <a href="#" class="acms-btn-admin acms-btn-admin-info">infoなボタン</a>
    <a href="#" class="acms-btn-admin acms-btn-admin-danger">dangerなボタン</a>
    <a href="#" class="acms-btn-admin acms-btn-small">smallなボタン</a>
    <a href="#" class="acms-btn-admin acms-btn-admin-primary acms-btn-admin-save">保存用</a>

各HTML要素にボタン

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

リンク

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

## ボタンの動き

regularなボタン hoevrなボタン activeなボタン

    <a href="#" class="acms-btn">regularなボタン</a>
    <a href="#" class="acms-btn acms-btn-hover">hoverなボタン</a>
    <a href="#" class="acms-btn acms-btn-active">activeなボタン</a>

## ボタンの色

用意したもの6種類

- 青色ボタン
- 水色のボタン
- 緑色ののボタン
- 黄色のボタン
- 赤色のボタン
- リンクのボタン

Primaryなボタン Infoなボタン Successなボタン Warningなボタン Dangerなボタン Linkなボタン

    <a href="#" class="acms-btn acms-btn-primary">Primaryなボタン</a>
    <a href="#" class="acms-btn acms-btn-info">Infoなボタン</a>
    <a href="#" class="acms-btn acms-btn-success">Successなボタン</a>
    <a href="#" class="acms-btn acms-btn-warning">Warningなボタン</a>
    <a href="#" class="acms-btn acms-btn-danger">Dangerなボタン</a>
    <a href="#" class="acms-btn acms-btn-link">Linkなボタン</a>

## ボタンの大きさ

用意したもの4種類

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

smallなボタン normalなボタン largeなボタン

    <a href="#" class="acms-btn acms-btn-small">smallなボタン</a>
    <a href="#" class="acms-btn">normalなボタン</a>
    <a href="#" class="acms-btn acms-btn-large">largeなボタン</a>

    <button type="button" class="acms-btn block-level">Block Levelなボタン</button>

## 押せないボタン

- button要素のもの
- クラス名が「acms-btn-disabled」のもの

クラス名がdisabledなボタン

    <button type="button" class="acms-btn" disabled="disabled">disabledなボタン</button>
    <a href="#" class="acms-btn acms-btn-disabled">クラス名がdisabledなボタン</a>