دکمه های سایت خود را با این انیمیشن های جالب کلیک خور کنید

دکمه های سایت خود را با این انیمیشن های جالب کلیک خور کنید: سلام و درووود به رفیق رایا وردپرسی خودم 👋💙 حال دلت چطوره؟
تو این پست قراره باهم یه کاری کنیم که نرخ کلیک دکمه‌های سایتت پرواز کنه 🚀
اون دکمه‌های ساده و بی‌روح رو می‌خوایم تبدیل کنیم به دکمه‌هایی که مثل آهنربا کاربر رو جذب می‌کنن 🧲 و هیچ‌کس نمی‌تونه در برابر وسوسه کلیک کردنشون مقاومت کنه! 😍

بیا رو راست باشیم. تو ساعت‌ها وقت می‌ذاری، یه محصول بی‌نظیر می‌سازی یا یه محتوای عالی می‌نویسی. کاربر رو تا یک قدمی هدف می‌رسونی… اما وقتی نوبت به اون دکمه‌ی مهم «خرید» یا «ثبت‌نام» می‌رسه، هیچ اتفاقی نمی‌افته. انگار نامرئیه، نه؟ 😥

ولی نگران نباش ✌️ راه‌حلش خیلی ساده‌تر از چیزیه که فکر می‌کنی: انیمیشن دکمه.
یه انیمیشن کوچیک و هوشمندانه می‌تونه همون دکمه‌ی خشک و بی‌حال رو به یه آهنربای کلیک تبدیل کنه 🖱️

این دقیقاً همون چیزیه که قراره یاد بگیری! ✨ من برات یه کالکشن خفن از بیش از ۲۰ افکت و انیمیشن دکمه با CSS آماده کردم که آماده‌ی استفاده‌ست. فقط کافیه کدها رو کپی کنی و بندازی توی سایتت… همین! 😎

پس آستین‌هاتو بالا بزن، چون الان می‌خوایم باهم کاری کنیم که دکمه های سایتت کلیک خور و جذاب بشن⚡

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

ایجاد باکس‌ حرفه ای در المنتور بدون کدنویسی

مطالعه

طراحی کارت با هاور تعاملی در المنتور: نمایش و مخفی شدن جزئیات هنگام قرارگیری ماوس

مطالعه

ایجاد انیمیشن چیدمان کارت‌ ها روی هم هنگام اسکرول

مطالعه

چرا باید از انیمیشن دکمه استفاده کنی؟ 🤔

شاید فکر کنی انیمیشن دکمه فقط یه کار فانتزیه، اما سخت در اشتباهی! این جزئیات کوچیک، تأثیرات روانشناسی بزرگی روی کاربر دارن:

• جلب توجه هوشمندانه 🎯: یه انیمیشن ضربان‌دار ظریف می‌تونه چشم کاربر رو دقیقا به همونجایی که می‌خوای هدایت کنه: مثل دکمه “خرید محصول”
• افزایش کلیک (CTR) 🚀: این دیگه ثابت شده‌ست. دکمه‌های جذاب‌تر، کلیک بیشتری می‌گیرن. وقتی کلیک بیشتر بشه، نرخ تبدیل سایتت هم بالاتر می‌ره.
• شخصیت برند تو 🎨: انیمیشن‌های خلاقانه به سایتت هویت می‌دن. نشون می‌ده که تو به جزئیات اهمیت می‌دی و برندت مدرن و حرفه‌ایه.

خب، برای ساخت دکمه‌های جذاب توی سایتت، دو تا راه داری:

1- استفاده از ویجت HTML و گذاشتن کد دستی 👉 این روش انعطاف بیشتری بهت می‌ده. کافیه کد HTML دکمه زیر رو توی ویجت HTML المنتور یا توی هر جای سایتت بذاری:

<a href="#" class="RayaWp"><span>کلیک کن!</span></a>

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

2- استفاده از ویجت آماده المنتور (Button) 👉 راحت‌ترین روش همینه. کافیه از ویجت دکمه المنتور استفاده کنی و فقط یه کلاس CSS (همون کلاسی که داخل کد هست) بهش بدی تا انیمیشن روش اعمال بشه.

نکته مهم اینجاست: ساختار و بیس همه دکمه‌ها یکیه. یعنی همون کد HTML بالا ثابت می‌مونه. چیزی که ظاهر و افکت دکمه رو تغییر می‌ده، همون کدهای CSS مختلف هستن که برای هر انیمیشن جداگانه تعریف می‌کنیم.

🔥10 انیمیشن جذاب برای دکمه های سایت

1️⃣ انیمیشن افکت پالس (Pulse)

این افکت باعث می‌شه دکمه مثل قلب تپش داشته باشه و کاربر ناخودآگاه جذبش بشه.

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

پیش نمایش دکمه رو میتونی در زیر مشاهده کنی 🙂

2️⃣ انیمیشن لرزش (Shake)

این انیمیشن با لرزش شدید دکمه، توجه کاربر رو جلب می‌کنه.

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

پیش نمایش دکمه رو میتونی در زیر مشاهده کنی 🙂

3️⃣ انیمیشن بزرگ شدن تدریجی (Scale Up)

دکمه آرام بزرگ می‌شه و توجه کاربر رو جلب می‌کنه.

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

پیش نمایش دکمه رو میتونی در زیر مشاهده کنی 🙂

4️⃣ انیمیشن کش آمدن (Stretch)

دکمه در جهت افقی کشیده می‌شه و حس جلب توجه ایجاد می‌کنه.

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

پیش نمایش دکمه رو میتونی در زیر مشاهده کنی 🙂

5️⃣ انیمیشن حرکت سه‌بعدی کوچک (3D Pop)

دکمه کمی به جلو و عقب می‌ره و حس سه‌بعدی جذاب ایجاد می‌کنه.

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

پیش نمایش دکمه رو میتونی در زیر مشاهده کنی 🙂

6️⃣ انیمیشن سو سو زدن آتش (Fire Flicker)

این انیمینش با شبیه‌سازی حرکت سریع شعله آتش، توجه کاربر را جلب میکند.

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

پیش نمایش دکمه رو میتونی در زیر مشاهده کنی 🙂

7️⃣ انیمیشن Confetti Explosion

این یک افکت بصری شاد و جذابه که در اون، ایموجی 🎉 از دکمه به بیرون پخش میشه و حس بازخورد مثبت و حس جشن و موفقیت رو برای کاربر تداعی میکنه 🙂

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

پیش نمایش دکمه رو میتونی در زیر مشاهده کنی 🙂

8️⃣ انیمیشن Comet Trail

در این انیمیشن، یک خط یا درخشش نورانی به سرعت از یک سمت دکمه به سمت دیگر حرکت میکنه و حس پویایی و سرعت رو به کاربر منتقل میکنه.

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

پیش نمایش دکمه رو میتونی در زیر مشاهده کنی 🙂

9️⃣ انیمیشن موج (Ripple Wave)

با هر بار تپش، یه موج دایره‌ای از دکمه پخش می‌شه.

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

پیش نمایش دکمه رو میتونی در زیر مشاهده کنی 🙂

🔟 انیمیشن نئون درخشان (Neon Glow)

این افکت باعث می‌شه دکمه مثل تابلوهای نئونی بدرخشه و حالت فانتزی به سایتت بده ⚡💡

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

پیش نمایش دکمه رو میتونی در زیر مشاهده کنی 🙂

چند تا نکته مهم که باید حواست بهش باشه 💡

1. زیاده‌روی نکن! لازم نیست همه‌ی دکمه‌های سایتت انیمیشن داشته باشن. فقط روی دکمه‌های اصلی و مهم (Call to Actions) تمرکز کن. انیمیشن زیاد، کاربر رو گیج می‌کنه.
2. به زمینه فکر کن. یه انیمیشن فانتزی و پر زرق و برق شاید برای یه سایت فروشگاهی خوب باشه، اما برای یه سایت حقوقی مناسب نیست. انیمیشن باید با شخصیت برندت بخونه.
3. سرعت مهمه! انیمیشن‌ها باید سریع و روان باشن (معمولاً بین 0.2 تا 0.5 ثانیه). انیمیشن کند حوصله کاربر رو سر می‌بره.
4. دسترس‌پذیری (Accessibility) رو فراموش نکن. مطمئن شو که انیمیشن‌ها باعث نمی‌شن متن دکمه ناخوانا بشه یا کار با کیبورد رو سخت کنه.

سخن پایانی: حالا نوبت توئه!

خب رفیق، حالا تو یه کالکشن از انیمیشن دکمه خفن داری! دیدی که با چند خط کد CSS ساده، چطور می‌شه یه تغییر بزرگ توی تجربه کاربری سایت ایجاد کرد. انیمیشن دکمه فقط کد نیست، یه روش برای صحبت کردن با کاربرته.

یادت نره، بهترین انیمیشن اونیه که هم زیبا باشه و هم هدفمند. پس برو و دکمه‌های سایتت رو از این حالت بی‌روح و خسته‌کننده در بیار. کدوم انیمیشن دکمه رو ترجیح میدی؟ برامون تو کامنت‌ها بنویس!