「いいね」ボタンをドキドキさせる演出を追加する方法

はじめに

メイド・イン・ヘブン設定→オプション→ 「いいねボタン」をオンにした際、「いいね」ボタンにマウスオバーしても、変化しません（図1参照）。

この記事では、アイコンにドキドキするような演出を追加する方法について説明します。

実装手順

以下のコードをstyle.cssに追加します。

.like .button {
  display: inline-block;

  &:hover {
    animation: like 0.5s linear infinite;
  }
}

@keyframes like {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

さいごに

今回紹介した方法を使えば、いいねボタンにドキドキするような演出を追加でき、視覚的に魅力的な反応を提供することができます。
この演出によって、ユーザーの関心を引き、サイトの印象をより魅力的にすることができます。