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

アイコンスワップボタン

ホバーで矢印が右へ飛び出し、左から別の矢印が入れ替わりで現れます。WordPressの回遊導線に軽快な印象を添えます。

hovercss

プレビュー

ソースコード

HTML

<a href="#" class="d04-01-08-btn" onclick="return false;">
          採用情報を見る
          <span class="d04-01-08-icon" aria-hidden="true">
            <span class="d04-01-08-a d04-01-08-a1">→</span>
            <span class="d04-01-08-a d04-01-08-a2">→</span>
          </span>
        </a>

CSS

.d04-01-08-btn{
          display:inline-flex;
          align-items:center;
          gap:12px;
          padding:14px 36px;
          background:#111;
          color:#fff;
          font-size:15px;
          font-weight:600;
          letter-spacing:.08em;
          text-decoration:none;
          border-radius:6px;
        }
        .d04-01-08-icon{
          position:relative;
          display:inline-block;
          width:20px;
          height:20px;
          overflow:hidden;
        }
        .d04-01-08-a{
          position:absolute;
          inset:0;
          display:flex;
          align-items:center;
          justify-content:center;
          font-size:16px;
          line-height:1;
          transition:transform .3s ease, opacity .3s ease;
        }
        .d04-01-08-a1{
          transform:translateX(0);
          opacity:1;
        }
        .d04-01-08-a2{
          transform:translateX(-140%);
          opacity:0;
        }
        .d04-01-08-btn:hover .d04-01-08-a1{
          transform:translateX(140%);
          opacity:0;
        }
        .d04-01-08-btn:hover .d04-01-08-a2{
          transform:translateX(0);
          opacity:1;
          transition-delay:.08s;
        }

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