パーツ番号 01-02-11 ・ CSSのみ

二択スプリットCTA

個人向け・法人向けの2つの入口を左右に並べ、ホバーした側がせり出して強調されます。WordPressのトップページで来訪者を最適な導線に振り分けたい場合に使えます。

hovercss

プレビュー

ソースコード

HTML

<div class="d01-02-11-split">
          <a href="#" class="d01-02-11-side d01-02-11-l" onclick="return false">
            <span class="d01-02-11-ico">👤</span>
            <span class="d01-02-11-t">個人のお客様</span>
            <span class="d01-02-11-s">まずは無料でお試し</span>
          </a>
          <a href="#" class="d01-02-11-side d01-02-11-r" onclick="return false">
            <span class="d01-02-11-ico">🏢</span>
            <span class="d01-02-11-t">法人のお客様</span>
            <span class="d01-02-11-s">導入のご相談はこちら</span>
          </a>
        </div>

CSS

.prev.d01-02-11{padding:0;overflow:hidden}
        .d01-02-11-split{display:flex;width:100%;height:260px}
        .d01-02-11-side{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-decoration:none;color:#fff;transition:flex .4s ease,filter .4s ease}
        .d01-02-11-l{background:linear-gradient(160deg,#0ea5e9,#0369a1)}
        .d01-02-11-r{background:linear-gradient(200deg,#7c3aed,#4c1d95)}
        .d01-02-11-split:hover .d01-02-11-side{flex:.8;filter:brightness(.7)}
        .d01-02-11-split .d01-02-11-side:hover{flex:1.4;filter:brightness(1)}
        .d01-02-11-ico{font-size:26px}
        .d01-02-11-t{font-size:15px;font-weight:800}
        .d01-02-11-s{font-size:11px;opacity:.85}

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