News

ボタン

a要素やbutton要素に付与すれば押せそうな感じなるスタイル。

ボタンの基本ベーススタイル、a要素にクラスc-buttonを付与し、a要素の中身は文字列のみ。
矢印アイコンはsvg要素で入れクラスarrを付与する。

<a href="#" class="c-button">ボタン</a> 矢印はSVGで入れる

<a href="#" class="c-button">矢印はSVGで入れる<svg width="24" height="24" viewBox="0 0 24 24" class="arr"><use href="../../assets/img/ico.svg#arrow"/></svg></a>

a要素の中身はインライン・グリッドで組まれるため、他の要素が入ると縦にグリッドが積まれてしまう。

ボタン（矢印はSVGで入れる）

<a href="#" class="c-button">ボタン<small>（矢印はSVGで入れる）</small><svg width="24" height="24" viewBox="0 0 24 24" class="arr"><use href="../../assets/img/ico.svg#arrow"/></svg></a>

ただし、横幅を最大320pxに固定しているため、長い文字列を入れる場合は意図的に<br>タグを入れるなどすると良い。

途中に<wbr>とか入るだけで文字列が縦に分断される（改行されたわけではない）

<a href="#" class="c-button">途中に<wbr>とか入るだけで<wbr>文字列が分断される<small>（改行されたわけではない）</small><svg width="24" height="24" viewBox="0 0 24 24" class="arr"><use href="../../assets/img/ico.svg#arrow"/></svg></a>

非活性

input要素もしくはbutton要素のボタンで、disabled属性が付与されている時はグレーアウトする。

<input type="submit" class="c-button" disabled> <button type="button" class="c-button" disabled>送信できない</button>

サイズバリエーション

サイズ違いがよっつ用意してある。
クラス-lを併記すると大きめボタン、クラス-sを併記すると小さめボタン、クラス-xlを併記すると親要素の横幅いっぱいに広がる大きいボタン、クラス-xsを併記すると文字量に伴い横幅が広がる小さいボタンになる。
コンポーネントから削除してもいいしカスタムしても良い。

<input type="button" value="大きめボタン" class="c-button -l"> <button type="button" class="c-button -s">小さめボタン</button> <button type="submit" class="c-button -xl">大きいボタン</button> <input type="button" value="小さいボタン" class="c-button -xs">

「小さめボタン」よりもう少し小さな、主に「もっと見る」に使われることを見越したクラスc-moreも用意。

<a href="#" class="c-more">もっと見る</a>