راه‌های بسیاری برای به دست آوردن توجه کاربران وجود دارد. در موارد خاص، انیمیشن گزینهٔ مناسبی برای جلب توجه کاربر به یک دکمه یا لینک است. اساساً انیمیشن‌ها در وب‌سایت‌های مختلف به مواردی مانند تغییر رنگ یا عوض شدن گرادیانت محدود می‌شوند اما با امکاناتی که CSS3 در اختیار ما می‌گذارد، چیزهای بیشتری هستند که می‌توانیم با استفاده از آن‌ها جلب توجه کنیم که یکی از این موارد، ایجاد انیمیشن برای دکمه‌ها و ... است که با استفاده از لایبرری Hover.css، این کار به سادگی امکان‌پذیر است.

Hover.css یک لایبرری رایگان و اپن‌سورس برای اِعمال انیمیشن روی اِلِمان‌های مختلف وب از جمله تصاویر، دکمه‌ها، لوگوها و ... است. این لایبرری بیش از 40 نوع انیمیشن مختلف را در اختیارتان قرار می‌دهد که به دسته‌های انیمیشن‌های دوبُعدی، انیمیشن‌های سایه و نور، انیمیشن‌های نقل‌قول و انیمیشن‌های پیچاندن صفحه تقسیم می‌شوند.

روش استفاده از لایبرری Hover.css
برای شروع ابتدا لازم است تا این لایببری را با استفاده از لینک فوق دانلود نمایید و سپس فایل hover.css را به فایل‌های پروژهٔ خود اضافه کنید. در انتها نیز باید فایل سی‌اس‌اس را به صفحهٔ وب خود لینک دهید که این کار را می‌بایست داخل تگ <head> صفحه از طریق تگ link انجام دهید.

برای اضافه کردن انیمیشن به عناصر صفحه، کافی است نام اِفِکت انیمیشن را به کلاس اِلِمان مورد نظر خود وارد کنید. کافی است اسامی داخل صفحه را با حروف کوچک نوشته و به جای Space از خط فاصله (-) استفاده کنید. حال برای اینکه افکت مد نظر را روی این دکمه اعمال کنید، باید آن را به دکمه اضافه کنیم که در اینجا برای مثال افکت مذکور hover-shadow نام دارد که به عنوان خروجی خواهیم داشت:

شخصی‌سازی لایبرری Hover.css
اگر فایل hover.css را با یک ویرایشگر باز کنید، مشاهده می‌کنید که هر افکت با یکسری تنظیمات پیش‌فرض آمده است. این تنظیمات به عنصر مورد نظر کمک می‌کنند تا عملکرد بهتری روی صفحه داشته باشد که در ادامه به یکسری از این تنظیمات اشاره می‌کنیم که می‌توانید با عوض کردن آن‌ها با توجه به نیازهای خود، آن افکت را شخصی‌سازی کنید:
display: این پراپرتی برای به نمایش درآمدن افکت نیاز است.
transform: در این قسمت از CSS3 Transforms استفاده شده تا نتیجه را روی موبایل و تبلت بهبود ببخشد
box-shadow: با استفاده از این پراپرتی، به عناصر سایهٔ شفاف داده شده است تا در موبایل و تبلت گوشه‌های عناصر صاف‌تر به‌نظر برسند.

Hover.css یکی از نمونه‌های جذاب پیاده‌سازی CSS3 است که برای بسیاری از این انیمیشن‌ها از ویژگی‌های جدید عرضه شده در CSS3 استفاده کرده است. توجه داشته باشید برای استفادهٔ کامل‌تر از این لایبرری، لازم است تا حتماً این انیمیشن‌ها را برای مرورگرهای قدیمی‌تر که از این ویژگی‌ها پشتیبانی نمی‌کنند بهینه‌سازی کنید.

Hover.css: لایبرری سبک برای افزودن انیمیشن به سایت