work with both a and button tags
<p>
<a class="CG2-button" href="#">button:a element</a>
</p>
<p>
<button class="CG2-button" href="#">button: button element</button>
</p>
with an icon
<p>
<a class="CG2-button" href="#"><span class="CG2-icon-pxg"></span>button</a>
</p>
use for Primary, Action, Setting
<p>
<a class="CG2-button CG2-button--primary" href="#">button</a>
</p>
<p>
<a class="CG2-button CG2-button--action" href="#">button</a>
</p>
<p>
<a class="CG2-button CG2-button--setting" href="#">button</a>
</p>
sizes
<p>
<a class="CG2-button CG2-button--thin" href="#">button</a>
</p>
<p>
<a class="CG2-button CG2-button--large" href="#">button</a>
</p>
<p>
<a class="CG2-button CG2-button--fullWidth" href="#">button</a>
</p>
disabled
button
の時はdisabled
属性を明示、
それ以外(a
など)の場合は、aria-disabled="true"
を明示
<p>
<a class="CG2-button" aria-disabled="true" href="#">button</a>
</p>
<p>
<a class="CG2-button CG2-button--primary" aria-disabled="true" href="#">primary button</a>
</p>
<p>
<a class="CG2-button CG2-button--action" aria-disabled="true" href="#">action button</a>
</p>
<p>
<a class="CG2-button CG2-button--setting" aria-disabled="true" href="#">setting button</a>
</p>
progress
<p>
<a class="CG2-button CG2-button--progress" href="#">button</a>
</p>
work with both a and button tags
<div style="background: rgba( 0, 0, 0, 0.5 );">
<p>
<a class="CG2-transparentButton" href="#">button:a element</a>
</p>
<p>
<button class="CG2-transparentButton" href="#">button: button element</button>
</p>
</div>
disabled
<div style="background: rgba( 0, 0, 0, 0.5 );">
<p>
<a class="CG2-transparentButton" aria-disabled="true" href="#">button</a>
</p>
<p>
<button class="CG2-transparentButton" disabled href="#">button</button>
</p>
</div>
fav
.CG2-transparentButton__favText内にテキストを入れて管理する
<div style="background: rgba( 0, 0, 0, 0.5 );">
<p>
<button class="CG2-transparentButton"><span class="CG2-icon-star"></span><span class="CG2-transparentButton__favText">このシリーズをお気に入りに登録</span></button>
</p>
<p>
<button class="CG2-transparentButton CG2-transparentButton--favAdded"><span class="CG2-icon-star"></span><span class="CG2-transparentButton__favText">このシリーズをお気に入りに登録</span></button>
</p>
</div>
<div class="CG2-buttonContainer">
<ul>
<li><a class="CG2-button CG2-button--primary" href="#">button 1</a></li>
<li><a class="CG2-button" href="#">button 2</a></li>
</ul>
</div>
左寄せ
<div class="CG2-buttonContainer CG2-buttonContainer--pullLeft">
<ul>
<li><a class="CG2-button CG2-button--primary" href="#">button 1</a></li>
<li><a class="CG2-button" href="#">button 2</a></li>
</ul>
</div>
ラージスクリーン時full width
<div class="CG2-buttonContainer">
<ul>
<li class="CG2-buttonContainer__item--full"><a class="CG2-button CG2-button--primary" href="#">button 1</a></li>
<li><a class="CG2-button" href="#">button 2</a></li>
</ul>
</div>