リンク・ボタン

リンク

文章中のリンク

詳しい情報はこちらをご覧ください。 さらに詳しい解説は公式サイトからご確認いただけます。 詳細な資料は説明書PDF（2.3MB）からダウンロードできます。 

詳しい情報は<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">

ボタン

デフォルトボタン

aタグ

詳しく見る 公式サイト 説明書PDF（2.3MB） 前のページへ戻る 次のページへ進む 非活性ボタン 
<div class="u-space-y-xs">
<a href="★★★" class="c-btn">  <span class="c-btn_label">  詳しく見る    </span>  </a>
<a href="★★★" class="c-btn">  <span class="c-btn_label">  公式サイト <span role="img" class="icon_external" aria-label="新規タブで開く"></span>   </span>  </a>
<a href="★★★" 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="★★★" class="c-btn">  <span class="c-btn_label">  前のページへ戻る   <span role="img" class="icon_caret-right"></span>
</span>  </a>
<a href="★★★" class="c-btn">  <span class="c-btn_label">
<span role="img" class="icon_caret-left"></span> 次のページへ進む    </span>  </a>
<a href="★★★" inert class="c-btn">  <span class="c-btn_label">  非活性ボタン    </span>  </a>
</div>

buttonタグ

<div class="u-space-y-xs">
<button type="button" class="c-btn">  <span class="c-btn_label">  詳しく見る    </span>  </button>
<button type="button" class="c-btn">  <span class="c-btn_label">  公式サイト <span role="img" class="icon_external" aria-label="新規タブで開く"></span>   </span>  </button>
<button type="button" class="c-btn">  <span class="c-btn_label">  説明書PDF（2.3MB）  <span role="img" class="icon_pdf" aria-label="PDFファイルを開く"></span>  </span>  </button>
<button type="button" class="c-btn">  <span class="c-btn_label">  前のページへ戻る   <span role="img" class="icon_caret-right"></span>
</span>  </button>
<button type="button" class="c-btn">  <span class="c-btn_label">
<span role="img" class="icon_caret-left"></span> 次のページへ進む    </span>  </button>
<button type="button" inert class="c-btn">  <span class="c-btn_label">  非活性ボタン    </span>  </button>
</div>

ボタン幅 固定

ボタン小（.-fixed-sm） ボタン中（.-fixed-md） ボタン大（.-fixed-lg） 
<div class="u-space-y-xs">
<a href="★★★" class="c-btn -fixed-sm">  <span class="c-btn_label">  ボタン小（.-fixed-sm）    </span>  </a>
<a href="★★★" class="c-btn -fixed-md">  <span class="c-btn_label">  ボタン中（.-fixed-md）    </span>  </a>
<a href="★★★" class="c-btn -fixed-lg">  <span class="c-btn_label">  ボタン大（.-fixed-lg）    </span>  </a>
</div>

ボタン幅 コンテンツ幅により可変

ボタン小（.-min-sm） ボタン中（.-min-md） ボタン大（.-min-lg） 
<div class="u-space-y-xs">
<a href="★★★" class="c-btn -min-sm">  <span class="c-btn_label">  ボタン小（.-min-sm）    </span>  </a>
<a href="★★★" class="c-btn -min-md">  <span class="c-btn_label">  ボタン中（.-min-md）    </span>  </a>
<a href="★★★" class="c-btn -min-lg">  <span class="c-btn_label">  ボタン大（.-min-lg）    </span>  </a>
</div>