Button

ボタンに関する機能の説明と使用例です。

タイプ

デフォルト

ボタンの横幅のサイズ(値)はテキストの長さに合わせて自動的に変更されます｡

<!-- default -->
<a href="#none" class="btnStrong">btnStrong</a>
<a href="#none" class="btnNormal">btnNormal</a>
<a href="#none" class="btnBasic">btnBasic</a>
<!-- mini -->
<a href="#none" class="btnStrong mini">ボタン</a>
<a href="#none" class="btnNormal mini">ボタン</a>
<a href="#none" class="btnBasic mini">ボタン</a>
<!-- その他 -->
<a href="#none" class="btnSubmit">btnSubmit</a>
<a href="#none" class="btnEm">btnEm</a>

グリッド/マージン/整列

ボタン幅100%タイプ

ボタンの横幅のサイズを100%(使用可能なフルサイズ)に設定する場合､gFullで括ります｡

<!-- 単独 -->
<a href="#none" class="btnSubmi gFull">ログイン</a>
<!-- グループ -->
<div class="ec-base-button gFull">
    <a href="#none" class="btnSubmit">ログイン</a>
    <a href="#none" class="btnEm">非会員注文確認</a>
</div>

ボタン+ボタン

2つ以上のボタンを横に並べる際に使用できます。

<!-- 並べられるボタンの数 : 4 -->
<div class="ec-base-button gColumn">
    <a href="#none" class="btnStrong">ボタン</a>
    <a href="#none" class="btnStrong">ボタン</a>
    <a href="#none" class="btnStrong">ボタン</a>
    <a href="#none" class="btnStrong">ボタン</a>
</div>
<!-- 並べられるボタンの数 : 3 -->
<div class="ec-base-button gColumn">
    <a href="#none" class="btnStrong">ボタン</a>
    <a href="#none" class="btnNormal">ボタン</a>
    <a href="#none" class="btnStrong">ボタン</a>
</div>
<!-- 並べられるボタンの数 : 2 -->
<div class="ec-base-button gColumn">
    <a href="#none" class="btnStrong">ボタン</a>
    <a href="#none" class="btnNormal">ボタン</a>
</div>
<div class="ec-base-button gColumn">
    <a href="#none" class="btnStrong">テキストの長さが長くなっても自動改行されない</a>
    <a href="#none" class="btnNormal">ボタン</a>
</div>
<!-- gFlex [flex:2, 3, 4] -->
<div class="ec-base-button gColumn">
    <a href="#none" class="btnStrong gFlex3">ボタンのテキストが長い場合</a>
    <a href="#none" class="btnNormal">短いテキストに変更</a>
    <a href="#none" class="btnStrong">長いテキスト</a>
</div>

右揃え(デフォルト)

ボタンを右揃えで表示させたい場合に使用できます。

<div class="ec-base-button">
    <a href="#none" class="btnStrong">ボタン</a>
    <a href="#none" class="btnNormal">ボタン</a>
</div>

中央揃え

ボタンを中央揃えで表示させたい場合に使用できます。

<div class="ec-base-button gCenter">
    <a href="#none" class="btnStrong">ボタン</a>
    <a href="#none" class="btnStrong">ボタン</a>
</div>

左揃え

ボタンを左揃えで表示させたい場合に使用できます。

<div class="ec-base-button gLeft">
    <a href="#none" class="btnStrong">ボタン</a>
    <a href="#none" class="btnStrong">ボタン</a>
</div>

両端揃え

ボタンを両端揃えで表示させたい場合に使用できます。

<div class="ec-base-button">
    <div class="gLeft">
        <a href="#none" class="btnStrong">ボタン</a>
    </div>
    <a href="#none" class="btnNormal">ボタン</a>
    <a href="#none" class="btnStrong">ボタン</a>
</div>

応用

オブジェクト+ボタン

オブジェクトとボタンを並べて表示させたい場合に使用できます。

<!-- テキスト+ボタン -->
<div class="ec-base-button">
    <span class="gLeft">配送完了</span>
    <a href="#none" class="btnStrong">ボタン</a>
</div>
<!-- input + ボタン -->
<div class="ec-base-button">
    <p class="gLeft"><input type="checkbox" />お知らせを表示</p>
    <a href="#none" class="btnStrong">ボタン</a>
</div>

多段

多段タイプのボタンが必要となる場合に使用できます。

<div class="ec-base-button typeMulti">
    <div class="gTop">
        <div class="gLeft">
            <a href="#none" class="btnNormal">ボタン</a>
        </div>
        <a href="#none" class="btnStrong">ボタン</a>
        <a href="#none" class="btnNormal">ボタン</a>
    </div>
    <div class="gBottom">
        <a href="#none" class="btnStrong">多段タイプのボタン</a>
    </div>
</div>

下部固定

ボタンを画面の下部に固定させたい場合に使用できます。

<div class="ec-base-button gFixed">
    <div class="ec-base-button gColumn">
        <a href="#none" class="btnSubmit">ボタン</a>
        <a href="#none" class="btnEm">ボタン</a>
    </div>
</div>

Cafe24 Smart design Support