تأثير درج متحرك عند مرور الماوس (Drawer Effect)

أزرار السوشيال ميديا لم تعد مجرد أيقونات ثابتة، بل أصبحت عنصرًا بصريًا مهمًا يعكس احترافية الموقع وتجربة المستخدم.

في هذا التصميم نقدم أزرار سوشيال ميديا بتأثير ثلاثي الأبعاد 3D بالكامل باستخدام HTML وCSS فقط، بدون أي JavaScript، مع تأثير مميز يشبه الدرج الذي يفتح ويغلق عند مرور الماوس.

فكرة التصميم

يعتمد التأثير على فكرة الدولاب أو الدرج، حيث تكون الأزرار مخفية جزئيًا، وعند تمرير الماوس تنزلق للخارج بسلاسة وكأنها درج يتم فتحه.
تم تنفيذ التأثير باستخدام CSS3 (Transform – Perspective – Transition) لإعطاء إحساس العمق والحركة الواقعية.

مميزات أزرار السوشيال ميديا

✔ تصميم ثلاثي الأبعاد 3D حقيقي
✔ بدون JavaScript نهائيًا (HTML + CSS فقط)
✔ تأثير درج احترافي عند Hover
✔ حركة ناعمة وسلسة
✔ متوافقة مع جميع المتصفحات الحديثة
✔ خفيفة جدًا ولا تؤثر على سرعة الموقع
✔ قابلة للتخصيص (ألوان – حجم – اتجاه الحركة)
✔ مناسبة لسطح المكتب والموبايل

لماذا بدون JavaScript؟

استخدام CSS فقط يجعل التصميم:

  • أسرع في التحميل

  • أكثر استقرارًا

  • أقل استهلاكًا للموارد

  • مناسب جدًا لمدونات بلوجر وصفحات الهبوط

كما أنه آمن تمامًا مع Google AdSense.

أماكن الاستخدام المناسبة

  • تذييل الموقع (Footer)

  • الشريط الجانبي

  • صفحات التعريف والـ Portfolio

  • صفحات الهبوط

  • المدونات الشخصية

التوافق مع أدسنس

✔ لا يحتوي على أكواد ضارة
✔ لا يجبر المستخدم على النقر
✔ لا يتداخل مع الإعلانات
✔ تجربة مستخدم نظيفة وواضحة

يفضّل دائمًا وضع الأزرار بعيدًا قليلًا عن وحدات الإعلانات.


كيفية تركيب الـ ازرار:

1. HTML

انسخ كود HTML  وضعه داخل المشاركة أو صفحة ثابتة:




2. CSS

أضف كود الـ CSS داخل تنسيق القالب أو داخل <style>:



الخلاصة

إذا كنت تبحث عن تصميم أزرار سوشيال ميديا مختلفة وغير تقليدية، فهذا التأثير سيضيف لمسة احترافية قوية لموقعك.
تأثير الدرج ثلاثي الأبعاد يعطي إحساسًا بالحركة والعمق دون الحاجة إلى أي JavaScript، مع أداء سريع وشكل عصري.