パーツ番号 04-05-10 ・ CSSのみ

ミニマル下線ボタン(テキストリンク風)

背景を持たず下線のみで構成したリンク風ボタンの見本。テキスト主体のシンプルなセクションに馴染む。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-05-10-wrap">
          <a class="d04-05-10-btn d04-05-10-a" href="#">詳しく見る</a>
          <a class="d04-05-10-btn d04-05-10-b" href="#">資料をダウンロード</a>
        </div>

CSS

.d04-05-10-wrap{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
        .d04-05-10-btn{ font-size:14px; font-weight:600; text-decoration:none; padding-bottom:4px; border-bottom:2px solid currentColor; font-family:inherit; }
        .d04-05-10-a{ color:#2563eb; }
        .d04-05-10-b{ color:#111827; }

クラス名 .d04-05-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。