これはかっこいい！コピペで簡単に実装できる、ボタンのハイライトを繊細なアニメーションでパルスさせるエフェクト

サイト構築 -CSS

Post on:2025年12月22日

sponsorsr

ぱっと見、なんてことはないエフェクトのように見えるかもしれませんが、ボタンのハイライトを繊細なアニメーションでパルスさせるエフェクトを紹介します。

シンプルなHTMLに、CSSをコピペするだけで簡単に実装できます。

実際の動作は、デモページでご覧ください。
「config」でそれぞれの数値を大きくすると、挙動がより分かりやすくなります。

See the Pen
CSSで実装する繊細なパルスエフェクト by coliss (@coliss)
on CodePen.

HTMLはシンプル、ボタンはbutton要素で実装し、data-border-pulseを付与します。

<main>
  <section>
    <button data-border-pulse><span>Subscribe</span></button>
  </section>
  <section>
    <button data-border-pulse><span>Subscribe</span></button>
  </section>
</main>

<main>

<button data-border-pulse><span>Subscribe</span></button>

</section>

<button data-border-pulse><span>Subscribe</span></button>

</section>

</main>

CSSで注目すべきポイントは、ボーダーのエフェクトです。
:activeに不透明度を変化させるアニメーションが設定されており、これが繊細なパルスエフェクトを与えています。

button::after {
  border: 1px solid #000;
  opacity: 0;
  transition: opacity 0.6s 0.1s var(--ease);
}
button:active::after {
  opacity: 1;
  transition-duration: 0s;
}

button::after {

border: 1px solid #000;

opacity: 0;

transition: opacity 0.6s 0.1s var(--ease);

}

button:active::after {

opacity: 1;

transition-duration: 0s;

}

元ネタは、下記ポストより。

subtle css border pulse effect w/ :active + offset opacity transition 🧑‍🍳

button::after {
border: 1px solid #000;
opacity: 0;
transition: opacity 0.6s 0.1s var(--ease);
}
button:active::after {
opacity: 1;
transition-duration: 0s;
} pic.twitter.com/uLYvbZHPNR

— jhey ʕ•ᴥ•ʔ (@jh3yy) December 16, 2025