CSSでボタンの枠を点滅させて強調表示する方法

CSSを使ってボタンの枠を点滅させて強調表示する方法を紹介します。

実行環境

HTML5
CCS3
Google Chrome: 126.0.6478.62（Official Build） （64 ビット）

準備

CSSで作成した以下のボタンを使います。
サイズ、色、枠線は任意のものに変更してください。

<div class="button">ボタン</div>

.button {
    width: 100px;
    height: 50px;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    background: palegreen;
}

実装

HTMLとCSSに、ボタンを強調表示させるクラスhighlightを追記します。

<div class="button highlight">ボタン</div>

.button {
  width: 100px;
  height: 50px;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  background: palegreen;
}

.highlight {
  position: relative;
}

.highlight::before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  display: block;
  border: 5px solid salmon;
  animation: blink 2s ease infinite;
}

@keyframes blink {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

クラスhighlightは疑似要素を使って、ボタンの周囲に点滅する枠線を追加しています。
border: 5px solid salmon;で枠線の設定をしています。任意の値に変更してください。
animation: blink 2s ease infinite;では、@keyframes blinkで設定した表示(opacity: 1)と透明化(opacity: 0)の遷移を２秒かけて行っています。0%、50%、100%で設定することで、じんわりとした点滅に設定できます。
上記のコードを追記することで、以下のような点滅をした強調表示が実装できます。