リンク・ボタン
リンク
文章中のリンク
詳しい情報は<a class="c-link" href="★★★">こちら</a>をご覧ください。<br aria-hidden="true">
さらに詳しい解説は<a class="c-link" href="★★★" target="_blank">公式サイト<span role="img" class="icon_external" aria-label="新規タブで開く"></span></a>からご確認いただけます。<br aria-hidden="true">
詳細な資料は<a class="c-link" href="★★★" target="_blank">説明書PDF（2.3MB）<span role="img" class="icon_pdf" aria-label="PDFファイルを開く"></span></a>からダウンロードできます。<br aria-hidden="true"> ボタン
デフォルトボタン
<div class="u-space-y-xs">
<a href="★★★" type="button" class="c-btn">
<span class="c-btn_label">詳しく見る</span>
</a>
<a href="★★★" type="button" class="c-btn">
<span class="c-btn_label">公式サイト<span role="img" class="icon_external" aria-label="新規タブで開く"></span></span>
</a>
<a href="★★★" type="button" class="c-btn">
<span class="c-btn_label">説明書PDF（2.3MB）<span role="img" class="icon_pdf" aria-label="PDFファイルを開く"></span></span>
</a>
<a href="★★★" type="button" class="c-btn">
<span class="c-btn_label"><span role="img" class="icon_caret-left"></span>前のページへ戻る</span>
</a>
<a href="★★★" type="button" class="c-btn">
<span class="c-btn_label">次のページへ進む<span role="img" class="icon_caret-right"></span></span>
</a>
<a href="★★★" type="button" inert class="c-btn">
<span class="c-btn_label">非活性ボタン</span>
</a>
</div> ボタン幅 固定
<div class="u-space-y-xs">
<a href="★★★" type="button" class="c-btn -fixed-sm">
<span class="c-btn_label">ボタン小（.-fixed-sm）</span>
</a>
<a href="★★★" type="button" class="c-btn -fixed-md">
<span class="c-btn_label">ボタン中（.-fixed-md）</span>
</a>
<a href="★★★" type="button" class="c-btn -fixed-lg">
<span class="c-btn_label">ボタン大（.-fixed-lg）</span>
</a>
</div> ボタン幅 コンテンツ幅により可変
<div class="u-space-y-xs">
<a href="★★★" type="button" class="c-btn -min-sm">
<span class="c-btn_label">ボタン小（.-min-sm）</span>
</a>
<a href="★★★" type="button" class="c-btn -min-md">
<span class="c-btn_label">ボタン中（.-min-md）</span>
</a>
<a href="★★★" type="button" class="c-btn -min-lg">
<span class="c-btn_label">ボタン大（.-min-lg）</span>
</a>
</div>