パーツ番号 04-01-03 ・ CSSのみ

矢印スライドボタン

ホバーで矢印が右へ動き、線がすっと伸びるテキストリンク型ボタン。WordPressの「もっと見る」導線に最適です。

hovercss

プレビュー

ソースコード

HTML

<a href="#" class="d04-01-03-btn" onclick="return false;">
          サービス一覧へ
          <span class="d04-01-03-arrow" aria-hidden="true">
            <span class="d04-01-03-line"></span>
            <span class="d04-01-03-head">→</span>
          </span>
        </a>

CSS

.d04-01-03-btn{
          display:inline-flex;
          align-items:center;
          gap:14px;
          padding:12px 8px;
          color:#222;
          font-size:15px;
          font-weight:600;
          letter-spacing:.1em;
          text-decoration:none;
          border-bottom:1px solid #ccc;
        }
        .d04-01-03-arrow{
          display:inline-flex;
          align-items:center;
          transition:transform .3s ease;
        }
        .d04-01-03-line{
          display:block;
          width:24px;
          height:1px;
          background:#222;
          margin-right:-8px;
          transform:scaleX(.4);
          transform-origin:right center;
          transition:transform .3s ease;
        }
        .d04-01-03-head{
          font-size:16px;
          line-height:1;
          color:#222;
        }
        .d04-01-03-btn:hover .d04-01-03-arrow{
          transform:translateX(8px);
        }
        .d04-01-03-btn:hover .d04-01-03-line{
          transform:scaleX(1);
        }

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