Button: All

<div class="_guide-box">

    <div class="h2_guide-title">Default</div>
    <a href="" class="yui-btn">a.yui-btn</a>
    <span class="yui-btn">span.yui-btn</span>
    <div class="yui-btn">div.yui-btn</div>
    <button class="yui-btn">button.yui-btn</button>
    <input class="yui-btn" type="submit" value="inputSubmit.yui-btn">

    <hr class="hr_guide-line">

    <div class="h2_guide-title">Plain</div>
    <a href="" class="yui-btn-plain">a.yui-btn-plain</a>
    <span class="yui-btn-plain">span.yui-btn-plain</span>
    <div class="yui-btn-plain">div.yui-btn-plain</div>
    <button class="yui-btn-plain">button.yui-btn-plain</button>
    <input class="yui-btn-plain" type="submit" value="inputSubmit.yui-btn-plain">

    <hr class="hr_guide-line">

    <div class="h2_guide-title">Floating</div>
    <a href="" class="yui-btn-floating">a.yui-btn-floating</a>
    <span class="yui-btn-floating">span.yui-btn-floating</span>
    <div class="yui-btn-floating">div.yui-btn-floating</div>
    <button class="yui-btn-floating">button.yui-btn-floating</button>
    <input class="yui-btn-floating" type="submit" value="inputSubmit.yui-btn-floating">

    <hr class="hr_guide-line">

    <div class="h2_guide-title">Melt</div>
    <a href="" class="yui-btn-melt">a.yui-btn-melt</a>
    <span class="yui-btn-melt">span.yui-btn-melt</span>
    <div class="yui-btn-melt">div.yui-btn-melt</div>
    <button class="yui-btn-melt">button.yui-btn-melt</button>
    <input class="yui-btn-melt" type="submit" value="inputSubmit.yui-btn-melt">

    <hr class="hr_guide-line">

    <hr class="hr_guide-line">
    <div class="h2_guide-title">Outline</div>
    <a href="" class="yui-btn-outline">a.yui-btn-outline</a>
    <span class="yui-btn-outline">span.yui-btn-outline</span>
    <div class="yui-btn-outline">div.yui-btn-outline</div>
    <button class="yui-btn-outline">button.yui-btn-outline</button>
    <input class="yui-btn-outline" type="submit" value="inputSubmit.yui-btn-outline">

    <hr class="hr_guide-line">

    <div class="h2_guide-title">Ghost</div>

    <div style="padding: 16px; background: #ccc;">

        <a href="" class="yui-btn-ghost">a.yui-btn-ghost</a>
        <span class="yui-btn-ghost">span.yui-btn-ghost</span>
        <div class="yui-btn-ghost">div.yui-btn-ghost</div>
        <button class="yui-btn-ghost">button.yui-btn-ghost</button>
        <input class="yui-btn-ghost" type="submit" value="inputSubmit.yui-btn-ghost">

    </div>

</div>

<div class="_guide-box">

    <div class="h2_guide-title">Theme Color</div>
    <p><code>.is-primary</code>,<code>.is-info</code>,<code>.is-warning</code>,<code>.is-danger</code></p>

    <a href="" class="yui-btn is-primary">yui-btn.is-primary</a>
    <a href="" class="yui-btn is-info">yui-btn.is-info</a>
    <a href="" class="yui-btn is-warning">yui-btn.is-warning</a>
    <a href="" class="yui-btn is-danger">yui-btn.is-danger</a>

    <hr class="hr_guide-line">

    <div class="h2_guide-title">Brand Color</div>
    <p><code>.is-twitter</code>,<code>.is-facebook</code>,<code>.is-hatena</code>,<code>.is-pocket</code></p>

    <a href="" class="yui-btn is-twitter">yui-btn.is-twitter</a>
    <a href="" class="yui-btn is-facebook">yui-btn.is-facebook</a>
    <a href="" class="yui-btn is-hatena">yui-btn.is-hatena</a>
    <a href="" class="yui-btn is-pocket">yui-btn.is-pocket</a>

</div>

<div class="_guide-box">

    <div class="h2_guide-title">Disable</div>
    <p><code>.is-disable</code></p>

    <a href="" class="yui-btn-plain is-disable">a.yui-btn-plain.is-disable</a>
    <span class="yui-btn-plain is-disable">span.yui-btn-plain.is-disable</span>
    <div class="yui-btn-plain is-disable">div.yui-btn-plain.is-disable</div>
    <button class="yui-btn-plain is-disable">button.yui-btn-plain.is-disable</button>
    <input class="yui-btn-plain is-disable" type="submit" value="inputSubmit.yui-btn-plain.is-disable">

    <hr class="hr_guide-line">

    <div class="h2_guide-title">Block</div>
    <p><code>.is-block</code></p>

    <a href="" class="yui-btn-plain is-block">a.yui-btn-plain.is-block</a>
    <span class="yui-btn-plain is-block">span.yui-btn-plain.is-block</span>
    <div class="yui-btn-plain is-block">div.yui-btn-plain.is-block</div>
    <button class="yui-btn-plain is-block">button.yui-btn-plain.is-block</button>
    <input class="yui-btn-plain is-block" type="submit" value="inputSubmit.yui-btn-plain.is-block">

    <hr class="hr_guide-line">

    <div class="h2_guide-title">side-up</div>
    <p><code>.is-side-up</code></p>

    <a href="" class="yui-btn-plain is-side-up">a.yui-btn-plain.is-side-up</a>
    <span class="yui-btn-plain is-side-up">span.yui-btn-plain.is-side-up</span>
    <div class="yui-btn-plain is-side-up">div.yui-btn-plain.is-side-up</div>
    <button class="yui-btn-plain is-side-up">button.yui-btn-plain.is-side-up</button>
    <input class="yui-btn-plain is-side-up" type="submit" value="inputSubmit.yui-btn-plain.is-side-up">

    <hr class="hr_guide-line">

    <div class="h2_guide-title">Round</div>
    <p><code>.is-round</code></p>

    <a href="" class="yui-btn-plain is-round">a.yui-btn-plain.is-round</a>
    <span class="yui-btn-plain is-round">span.yui-btn-plain.is-round</span>
    <div class="yui-btn-plain is-round">div.yui-btn-plain.is-round</div>
    <button class="yui-btn-plain is-round">button.yui-btn-plain.is-round</button>
    <input class="yui-btn-plain is-round" type="submit" value="inputSubmit.yui-btn-plain.is-round">

    <hr class="hr_guide-line">

    <div class="h2_guide-title">Round None</div>
    <p><code>.is-round-none</code></p>

    <a href="" class="yui-btn-plain is-round-none">a.yui-btn-plain.is-round-none</a>
    <span class="yui-btn-plain is-round-none">span.yui-btn-plain.is-round-none</span>
    <div class="yui-btn-plain is-round-none">div.yui-btn-plain.is-round-none</div>
    <button class="yui-btn-plain is-round-none">button.yui-btn-plain.is-round-none</button>
    <input class="yui-btn-plain is-round-none" type="submit" value="inputSubmit.yui-btn-plain.is-round-none">

    <hr class="hr_guide-line">

    <div class="h2_guide-title">Icon Round</div>
    <p><code>.is-icon-round</code></p>

    <a href="" class="yui-btn-plain is-icon-round"><i class="fas fa-home"></i></a>
    <span class="yui-btn-plain is-icon-round"><i class="fas fa-home"></i></span>
    <div class="yui-btn-plain is-icon-round"><i class="fas fa-home"></i></div>
    <button class="yui-btn-plain is-icon-round"><i class="fas fa-home"></i></button>

    <hr class="hr_guide-line">

    <div class="h2_guide-title">Circle</div>
    <p><code>.is-circle</code></p>

    <a href="" class="yui-btn-plain is-circle"><i class="fas fa-home"></i></a>
    <span class="yui-btn-plain is-circle"><i class="fas fa-home"></i></span>
    <div class="yui-btn-plain is-circle"><i class="fas fa-home"></i></div>
    <button class="yui-btn-plain is-circle"><i class="fas fa-home"></i></button>

</div>

<div class="_guide-box">

    <div class="h2_guide-title">Size</div>
    <a href="" class="yui-btn-plain is-xxs">a.yui-btn-plain.is-xxs</a>
    <a href="" class="yui-btn-plain is-xs">a.yui-btn-plain.is-xs</a>
    <a href="" class="yui-btn-plain is-sm">a.yui-btn-plain.is-sm</a>
    <a href="" class="yui-btn-plain is-md">a.yui-btn-plain.is-md</a>
    <a href="" class="yui-btn-plain is-lg">a.yui-btn-plain.is-lg</a>
    <a href="" class="yui-btn-plain is-xl">a.yui-btn-plain.is-xl</a>

</div>