یک دکمه بسازید که وقتی ماوس روی آن قرار می‌گیرد با استفاده از @keyframes به‌صورت پالس (بزرگ و کوچک شدن) حرکت کند و هم‌زمان رنگ پس‌زمینه‌اش تغییر کند.

یک عنصر دکمه ساده در HTML بسازید و در CSS از @keyframes برای تعریف انیمیشن پالس استفاده کنید (مثلاً تغییر scale در transform و تغییر background-color در فریم‌های مختلف). سپس در حالت :hover کلاس دکمه را طوری تنظیم کنید که animation با مدت و توابع زمانی مناسب اجرا شود (مثلاً animation: pulse 0.8s ease-in-out infinite). نکات: برای جلوگیری از جابه‌جایی محتوا از transform برای مقیاس‌دهی استفاده کنید، display را روی inline-block یا block قرار دهید، و در صورت نیاز از animation-fill-mode یا animation-iteration-count برای کنترل رفتار پس از اتمام انیمیشن بهره ببرید.