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

グラデーション移動ボタン

ホバーでグラデーションの位置が横にスライドし色味が変化します。WordPressのSaaS風LPや会員登録ボタンに映えます。

hovercss

プレビュー

ソースコード

HTML

<a href="#" class="d04-01-07-btn" onclick="return false;">無料ではじめる</a>

CSS

.d04-01-07-btn{
          display:inline-block;
          padding:15px 48px;
          color:#fff;
          font-size:15px;
          font-weight:700;
          letter-spacing:.08em;
          text-decoration:none;
          border-radius:999px;
          background:linear-gradient(90deg, #6a5cff 0%, #b04cff 50%, #ff5c8a 100%);
          background-size:200% 100%;
          background-position:0% 50%;
          box-shadow:0 6px 16px rgba(106,92,255,.35);
          transition:background-position .5s ease, box-shadow .3s ease, transform .3s ease;
        }
        .d04-01-07-btn:hover{
          background-position:100% 50%;
          box-shadow:0 8px 20px rgba(255,92,138,.4);
          transform:translateY(-2px);
        }

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