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

パルスCTAボタン

波紋が常時ふわっと広がり続け、視線を自然に集めるCTA。WordPressの固定ヘッダーやサイドバーの相談ボタンに有効です。

autocss

プレビュー

ソースコード

HTML

<a href="#" class="d04-01-09-btn" onclick="return false;">LINEで相談する</a>

CSS

.d04-01-09-btn{
          position:relative;
          display:inline-block;
          padding:15px 46px;
          background:#0aa14f;
          color:#fff;
          font-size:15px;
          font-weight:700;
          letter-spacing:.08em;
          text-decoration:none;
          border-radius:999px;
          box-shadow:0 4px 12px rgba(10,161,79,.35);
        }
        .d04-01-09-btn::before,
        .d04-01-09-btn::after{
          content:"";
          position:absolute;
          inset:0;
          border-radius:999px;
          border:2px solid rgba(10,161,79,.6);
          animation:d04-01-09-pulse 2.4s ease-out infinite;
          pointer-events:none;
        }
        .d04-01-09-btn::after{
          animation-delay:1.2s;
        }
        @keyframes d04-01-09-pulse{
          0%{
            transform:scale(1);
            opacity:1;
          }
          70%{
            transform:scale(1.35);
            opacity:0;
          }
          100%{
            transform:scale(1.35);
            opacity:0;
          }
        }
        .d04-01-09-btn:hover{
          background:#088a43;
        }

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