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

塗りつぶしスライドボタン

ホバーで背景色が左から満ちて文字色が反転します。WordPressの問い合わせ導線など、確実に気づかせたいボタンに。

hovercss

プレビュー

ソースコード

HTML

<a href="#" class="d04-01-02-btn" onclick="return false;">お問い合わせ</a>

CSS

.d04-01-02-btn{
          position:relative;
          display:inline-block;
          padding:14px 44px;
          border:2px solid #c2452d;
          color:#c2452d;
          background:#fff;
          font-size:15px;
          font-weight:700;
          letter-spacing:.08em;
          text-decoration:none;
          border-radius:4px;
          overflow:hidden;
          z-index:0;
          transition:color .35s ease;
        }
        .d04-01-02-btn::before{
          content:"";
          position:absolute;
          inset:0;
          background:#c2452d;
          transform:scaleX(0);
          transform-origin:left center;
          transition:transform .35s ease;
          z-index:-1;
        }
        .d04-01-02-btn:hover{
          color:#fff;
        }
        .d04-01-02-btn:hover::before{
          transform:scaleX(1);
        }

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