パーツ番号 07-03-02 ・ CSSのみ

再生ボタンパルス

再生アイコンの周りに波紋が広がり続けるアニメーション。動画セクションへ視線を誘導したいときに効果的で、WordPressのCTAとしても使えます。

css

プレビュー

ソースコード

HTML

<button class="d07-03-02-btn" aria-label="再生">
          <span class="d07-03-02-ring"></span>
          <span class="d07-03-02-ring d07-03-02-ring2"></span>
          <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
        </button>

CSS

.prev.d07-03-02{background:radial-gradient(circle at 50% 50%,#1e293b,#0f172a)}
        .d07-03-02-btn{position:relative;width:80px;height:80px;border:none;border-radius:50%;cursor:pointer;
          background:#06b6d4;display:flex;align-items:center;justify-content:center}
        .d07-03-02-btn svg{width:32px;height:32px;fill:#fff;margin-left:4px;position:relative;z-index:2}
        .d07-03-02-ring{position:absolute;inset:0;border-radius:50%;background:rgba(6,182,212,.5);
          animation:d07-03-02-pulse 2s ease-out infinite}
        .d07-03-02-ring2{animation-delay:1s}
        @keyframes d07-03-02-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.4);opacity:0}}

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