button

button

/src/assets2/scss/codegrid-ui.scss
  • button

work with both a and button tags

button:a element

<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

<p>
  <a class="CG2-button CG2-button--disabled" href="#">button</a>
</p>
<p>
  <a class="CG2-button CG2-button--primary CG2-button--disabled" href="#">primary button</a>
</p>
<p>
  <a class="CG2-button CG2-button--action CG2-button--disabled" href="#">action button</a>
</p>
<p>
  <a class="CG2-button CG2-button--setting CG2-button--disabled" href="#">setting button</a>
</p>

progress

<p>
  <a class="CG2-button CG2-button--progress" href="#">button</a>
</p>

transparentButton

/src/assets2/scss/codegrid-ui.scss
  • button

work with both a and button tags

button:a element

<div style="background: rgba( 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, .5 );">
  <p>
    <a class="CG2-transparentButton CG2-transparentButton--disabled" href="#">button</a>
  </p>
</div>

fav

.CG2-transparentButton__favText内にテキストを入れて管理する

<div style="background: rgba( 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>

buttonContainer

/src/assets2/scss/codegrid-ui.scss
  • button
<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>