8 هاور افکت دکمه که سایت شما را از این رو به آن رو می کند

8 هاور افکت دکمه که سایت شما را از این رو به آن رو می کند – سلام به رفیق رایا وردپرسی پر انرژیم! 😊 چطوری؟ امیدوارم که روزهات پر از لحظات خوش و خلاقیت باشه!

امروز با یه مقاله فوق‌العاده برگشتم که قراره سایتت رو به یه سطح جدید از جذابیت برسونه! 🔥 تو این پست می‌خوام درباره هاور افکت‌ دکمه‌های کال تو اکشن صحبت کنم. حتما با سایت‌هایی روبرو شدی که وقتی ماوس رو می‌بری روی دکمه‌ها، یه چیزی توی دلت بهت می‌گه “وای، چقدر جالب!” 😲 مثلاً رنگ دکمه تغییر می‌کنه، یه افکت باحال ظاهر میشه، یا حتی دکمه انگار قراره بهت یه دنیای جدید نشون بده! 😍 این‌ها همون هاور افکت‌هایی هستن که سایتت رو خاص، جذاب و حرفه‌ای می‌کنن.

خب، تو این مقاله قراره 8 نوع از این افکت‌های جذاب رو بهت معرفی کنم که می‌تونی خیلی راحت با HTML و CSS پیاده‌سازی کنی و سایتت رو از یه سایت معمولی به یه سایت جذاب و شیک تبدیل کنی! 🚀

پس آماده باش که سایتت رو با این افکت‌های جادویی به یه سطح جدید و هیجان‌انگیز برسونی!

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

×

بدون افزونه، ویرایشگر کلاسیک وردپرس را فعال کنید

مطالعه

قبل از اینکه بریم سراغ اصل ماجرا، بد نیس یه توضیح کوچیک درباره هاور افکت‌ها و دکمه‌های کال تو اکشن بدم، که بدونی دقیقاً دارم درباره چی صحبت می‌کنم! 😉

هاور افکت‌: جادوی پویا و جذاب کردن دکمه های سایت

هاور افکت، همونطور که از اسمش پیداست، افکتیه که وقتی ماوس رو می‌بری روی یه چیزی (مثل یه دکمه، تصویر یا لینک)، اون شیء یه تغییراتی می‌کنه. این تغییرات می‌تونه مثلاً رنگ عوض کردن، بزرگتر شدن، افکت انیمیشن، یا حتی یه حالت جدید پیدا کردن باشه. به طور کلی هدف اینه که وقتی کاربر ماوس رو میاره رو یه قسمت از صفحه، حس کنه که داره با یه چیزی خاص و جالب ارتباط برقرار می‌کنه. این کار باعث میشه سایت جذاب‌تر و کاربرپسندتر و پویاتر بشه!

دکمه‌های کال تو اکشن: دعوت به اقدام با یه کلیک!

دکمه‌های کال تو اکشن (Call to Action) یا همون دکمه‌های فراخوانی، دکمه‌هایی هستن که از کاربر می‌خوان یه کاری انجام بده. مثلاً می‌گه «ثبت‌نام کن»، «الان خرید کن» یا «بیشتر بخوان». این دکمه‌ها به درد موقعیت‌هایی می‌خورن که می‌خواهی کاربر رو به انجام یه عمل خاص دعوت کنی. مثلاً تو یه سایت فروشگاهی، دکمه‌ای که می‌گه «خرید کن»، یه دکمه کال تو اکشنه.

حالا وقتی این دکمه‌ها رو با یه هاور افکت جذاب ترکیب می‌کنی، سایتت یه حالت حرفه‌ای‌تر پیدا می‌کنه. یعنی وقتی کاربر ماوسش رو میاره روی دکمه، دکمه تغییر می‌کنه، رنگش عوض میشه، یا یه افکت جالب روش میاد که باعث میشه کاربر بیشتر ترغیب بشه روی اون دکمه کلیک کنه.

×

چطور یک افزونه‌ وردپرس را به نسخه‌ قبلی برگردانیم؟ آموزش دانگرید افزونه

مطالعه

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

👌هاور افکت های جذاب برای دکمه های سایت (hover effects for site buttons)

در ادامه به بررسی و معرفی 15 هاور افکت جذاب برای دکمه های سایت می پردازم با من تا پایان این مقاله همراه باشین 🙂

1- هاور افکت گسترش دایره‌ای (Circle Expansion Effect)

این هاور افکت به نام “Circle Expansion Effect” یا “افکت گسترش دایره‌ای” شناخته میشه. در این افکت، وقتی موس روی دکمه میره، یک دایره به رنگ آبی روشن از گوشه دکمه بیرون میاد و به سرعت بزرگ میشه. این افکت به دکمه‌ها یه حس پویایی و جذابیت میده و توجه کاربر رو به خودش جلب می‌کنه.

پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)

×

طراحی آکاردئون شگفت‌ انگیز با قابلیت باز و بسته شدن خودکار

مطالعه

کد HTML:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

کد CSS:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

2- هاور افکت ژله ای (Jelly Button Effect)

این افکت به نام “Jelly Button Effect” یا “افکت دکمه ژله‌ای” شناخته میشه. 🤩

×

با این ترفند ساده، عناوین طولانی نوشته های وردپرس را محدود کنید

مطالعه

در این افکت، زمانی که ماوس روی دکمه قرار میگیره، دکمه یه حالت ارتجاعی و کششی پیدا می‌کنه که شبیه به حرکت ژله هست. این حرکت باعث میشه که دکمه یه سری تغییرات جذاب (مثل بزرگ شدن و کوچک شدن) داشته باشه که به سایت یه حس جالب و سرگرم‌کننده میده. این افکت معمولاً برای دکمه‌هایی که می‌خواهیم کاربر رو جذب کنه و بیشتر به انجام عملی ترغیب کنه استفاده میشه.

پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)

کد HTML:

×

با این ترفند از ویرایش ادمین‌ ها در وردپرس جلوگیری کنید

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

کد CSS:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

3- هاور افکت نبض (Pulse Effect)

در این افکت، وقتی ماوس رو می‌بری روی دکمه، حاشیه دکمه شروع به بزرگ شدن می‌کنه و بعد به آرامی به حالت اولیه برمی‌گرده، انگار دکمه یه نبض داره که به صورت پالس تکرار میشه. این حرکت باعث میشه دکمه زنده و پویا به نظر بیاد و توجه کاربر رو جلب کنه.

پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)

×

3 راهکار فوق‌العاده برای تغییر نشانگر ماوس در وردپرس

مطالعه

کد HTML:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

کد CSS:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

4 – هاور افکت درخشش (Shine Effect)

در این افکت، وقتی ماوس رو می‌بری روی دکمه، یه نور درخشان شبیه به “برق زدن” از روی دکمه عبور می‌کنه و دکمه رو به طور جذابی درخشنده می‌کنه. این افکت باعث میشه که دکمه یه حس زنده و تابان پیدا کنه و توجه کاربر رو بیشتر جلب کنه.

پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)

×

ساخت نوار تزئینی چشم‌ نواز کنار باکس محتوا با CSS

مطالعه

کد HTML:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

کد CSS:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

5- هاور افکت اسلاید (Slide Effect)

این افکت یه حرکت اسلایدی برای دکمه ایجاد میکنه که وقتی ماوس رو روی دکمه می‌بری، یه پوشش رنگی از سمت چپ دکمه شروع به حرکت می‌کنه و به سمت راست گسترش پیدا می‌کنه تا کل دکمه رو در بر بگیره. این افکت حس یه حرکت نرم و مدرن به دکمه میده و باعث میشه دکمه جذاب‌تر و پویا به نظر برسه.

×

یکبار برای همیشه از شر دیدگاه اسپم و انگلیسی خلاص شو

مطالعه

پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)

کد HTML:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

کد CSS:

×

3 راهکار فوق‌العاده برای تغییر نشانگر ماوس در وردپرس

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

6- هاور افکت جمع شدن حاشیه (Border Shrink Effect)

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

پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)

کد HTML:

×

بدون افزونه، ویرایشگر کلاسیک وردپرس را فعال کنید

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

کد CSS:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

7- هاور افکت حاشیه‌ی رنگی با چرخش رنگ (Gradient Border with Hue Rotation Effect)

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

پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)

×

ترفند: آپلود فایل در هاست از طریق لینک (URL)

مطالعه

کد HTML:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

کد CSS:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

8- هاور افکت جابه جایی و سایه (Button Hover Translate and Shadow Effect)

این هاور افکت به این صورت کار می‌کنه که وقتی موس رو می‌بری روی دکمه، یک تغییر جالب می‌بینی: دکمه به سمت از بالا کمی به سمت پایین میره و این حسو به کاربر میده که دکمه به داخل صفحه میره هنگام هاور.

پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)

×

حذف فونت گوگل از سایت وردپرس بدون نیاز به افزونه

مطالعه

کد HTML:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

کد CSS:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

خب دوست عزیز! امیدوارم این 8 هاور افکت دکمه به دردت بخوره و بتونی ازش برای زیباتر کردن سایتت استفاده کنی. 😎✨ طراحی سایت همیشه می‌تونه با کمی خلاقیت و افکت‌های جذاب، متفاوت‌تر بشه!

×

نحوه افزودن و نمایش فایل PDF و Word در نوشته های وردپرس

مطالعه

اگر سوالی داشتی یا تجربه‌ای در مورد این افکت‌ها داری که می‌خوای با ما به اشتراک بذاری، حتماً تو کامنت‌ها بنویس. ما همیشه منتظر نظراتت هستیم! 💬💡

خیلی ممنون که وقت گذاشتی و مقاله رو خوندی. امیدوارم همیشه موفق و پرانرژی باشی! 🙌🚀

×

آموزش ساخت چایلد تم (Child Theme) برای قالب وردپرس

مطالعه