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

テキストロールボタン

ホバーで文字が上へロールし、下から別の文字が現れる2段テキスト。WordPressの飲食店・サロンサイトの導線に遊び心を。

hovercss

プレビュー

ソースコード

HTML

<a href="#" class="d04-01-10-btn" onclick="return false;">
          <span class="d04-01-10-roll">
            <span class="d04-01-10-t d04-01-10-t1">メニューを見る</span>
            <span class="d04-01-10-t d04-01-10-t2">ご予約はこちら</span>
          </span>
        </a>

CSS

.d04-01-10-btn{
          display:inline-block;
          padding:15px 44px;
          background:#3b3b3b;
          color:#fff;
          font-size:15px;
          font-weight:600;
          letter-spacing:.1em;
          text-decoration:none;
          border-radius:4px;
          overflow:hidden;
        }
        .d04-01-10-roll{
          position:relative;
          display:block;
          height:1.5em;
          overflow:hidden;
        }
        .d04-01-10-t{
          display:block;
          height:1.5em;
          line-height:1.5em;
          white-space:nowrap;
          transition:transform .35s cubic-bezier(.4,0,.2,1);
        }
        .d04-01-10-t2{
          color:#ffd166;
        }
        .d04-01-10-btn:hover .d04-01-10-t{
          transform:translateY(-100%);
        }

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