تصميم ازرار السوشيال ميديا بطريقة 3d احترافية

 

في عالم تصميم المواقع الحديثة، أزرار السوشيال ميديا ليست مجرد روابط بسيطة، بل أصبحت عناصر تصميم أساسية تجذب الانتباه وتعزز تجربة المستخدم. تصميم هذه الأزرار بطريقة ثلاثية الأبعاد (3D) ومتفاعلة Animated يجعلها أكثر جاذبية ويعطي موقعك مظهرًا احترافيًا.

في هذا المقال، سنتعلم كيفية إنشاء أزرار سوشيال ميديا ثلاثية الأبعاد متحركة باستخدام HTML وCSS فقط، دون الحاجة لمكتبات خارجية، مع دعم التأثيرات الحديثة وتوافق مع جميع الأجهزة.

---

ما ستتعلمه في هذا الدرس

1. تصميم أزرار ثلاثية الأبعاد باستخدام CSS

   • استخدام الظلال والإضاءة لإنشاء تأثير ثلاثي الأبعاد.

   • جعل الزر يبدو وكأنه مرتفع عن سطح الصفحة.

2. تأثيرات تحريك التمرير (Hover Animation)

   • عند مرور الماوس، تتحرك الأزرار بشكل سلس مع تأثير الانزلاق أو الانحناء.

   • يمكن إضافة تأثير انعكاس الضوء Glow لتسليط الضوء على الأزرار.

3. تقنية التصميم المتجاوب (Responsive Design)

   • تتكيف الأزرار تلقائيًا مع أحجام الشاشات المختلفة من الهواتف المحمولة إلى شاشات الكمبيوتر.

4. إضافة أيقونات Font Awesome

   • استخدام أيقونات شهيرة مثل فيسبوك، تويتر، انستغرام، يوتيوب بسهولة.

   • تغيير اللون أو الحجم حسب الهوية البصرية للموقع.

5. حيل تحسين واجهة المستخدم / تجربة المستخدم (UX/UI)

   • إضافة تأثيرات الاهتزاز أو الحركة عند الضغط على الأزرار.

   • تعزيز التفاعل البصري لجعل الأزرار أكثر وضوحًا وجاذبية.

---

المميزات الأساسية لهذه الأزرار

✔ جاذبية بصرية ثلاثية الأبعاد:
تُبرز الأزرار بطريقة تجعلها تبدو وكأنها تطفو على الصفحة، مما يزيد من التفاعل.

✔ تأثيرات متحركة سلسة:
تضيف الحياة إلى الموقع وتجعل التفاعل مع الأزرار ممتعًا للزوار.

✔ دعم جميع الأجهزة:
الأزرار متجاوبة بالكامل وتظهر بشكل مثالي على الهاتف، التابلت، والكمبيوتر.

✔ سهولة التخصيص:
يمكنك تغيير الألوان، الأحجام، أو إضافة أيقونات جديدة بسهولة من CSS فقط.

✔ مثالي لمحافظ الأعمال أو صفحات الهبوط:
يضيف لمسة احترافية ويزيد من معدل التفاعل مع الروابط الاجتماعية.

---

شرح بالفيديو

---

الاكواد المستخدمة

قبل وسم </head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" /> نسخ الكود

---

HTML

<ul> <li> <a href="#"> <i class="fa-brands fa-facebook-f" aria-hidden="true"></i> <span>- Facebook</span> </a> </li> <li> <a href="#"> <i class="fa-brands fa-twitter" aria-hidden="true"></i> <span>- Twitter</span> </a> </li> <li> <a href="#"> <i class="fa-brands fa-google-plus-g" aria-hidden="true"></i> <span>- Google</span> </a> </li> <li> <a href="#"> <i class="fa-brands fa-instagram" aria-hidden="true"></i> <span>- Instgram</span> </a> </li> </ul> نسخ الكود

---

CSS

@import url("https://fonts.googleapis.com/css2?famliy=Roboto:ital,wght@0,100..900;1,100..900&display=swap"); * { font-family: "Roboto", sans-serif; padding: 0; margin: 0; box-sizing: border-box; } body{ background: #ccc; } ul { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; margin: 0; padding: 0; } ul li { list-style: none; margin: 0 5px; } ul li a .fa-brands { font-size: 40px; color: #262626; line-height: 80px; transition: 0.5s; padding-right: 14px; } ul li a span { padding: 0; margin: 0; position: absolute; top: 30px; letter-spacing: 4px; transition: 0.5s; } ul li a{ text-decoration: none; display: absolute; display: block; width: 210px; height: 80px; background: #fff; padding-left: 20px; text-align: left; transform: rotate(-30deg) skew(25deg) translate(0, 0); transition: 0.5s; box-shadow: -2px 20px 10px rgba(0,0,0,0.5); } ul li a::before{ content: ""; position: absolute; top: 10px; left: -20px; height: 100%; width: 20px; background-color: #b1b1b1; transform: 0.5s; transform: rotate(0deg) skewY(-45deg); } ul li a::after{ content: ""; position: absolute; bottom: -20px; left: -10px; height: 20px; width: 100%; background: #b1b1b1; transform: 0.5s; transform: rotate(0deg) skewX(-45deg); } ul li a:hover{ transform: rotate(-30deg) skew(25deg) translate(20px, -15px); box-shadow: ;: -50px 50px 50px rgba(0,0,0,0.5); } ul li:hover .fa-brands{ color: #fff; } ul li:hover span{ color: #fff; } ul li:hover:nth-child(1) a{ background: #3b5998; } ul li:hover:nth-child(1) a::before{ background: #365492; }ul li:hover:nth-child(1) a::after{ background: #4a69ad; } ul li:hover:nth-child(2) a{ background: #00aced; } ul li:hover:nth-child(2) a::before{ background: #097aa5; }ul li:hover:nth-child(2) a::after{ background: #53b9e0; } ul li:hover:nth-child(3) a{ background: #dd4b39; } ul li:hover:nth-child(3) a::before{ background: #b33a2b; }ul li:hover:nth-child(3) a::after{ background: #e66a5a; } ul li:hover:nth-child(4) a{ background: #e4405f; } ul li:hover:nth-child(4) a::before{ background: #d81c3f; }ul li:hover:nth-child(4) a::after{ background: #e46880; } نسخ الكود

---

كيفية تحسين الأزرار

1. إضافة تأثيرات Glow Neon عند المرور بالماوس.

2. دمج حركة دوران أو انحناء عند الضغط على الأزرار.

3. استخدام تدرجات لونية متغيرة Animated Gradient لجعل الأزرار أكثر حيوية.

4. تعديل حجم الأيقونات أو الأزرار حسب تصميم الموقع.

---

نصائح إضافية

• استخدم أيقونات Font Awesome لتوفير جميع الأيقونات المطلوبة بشكل جاهز.

• تأكد من التباين بين لون الزر والخلفية لزيادة وضوحه.

• اجعل الأزرار قابلة للنقر بسهولة حتى على الشاشات الصغيرة.

• يمكنك إضافة رابط لكل زر لموقعك على الشبكات الاجتماعية لتعزيز التفاعل.

---

الخلاصة

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

يمكنك دمج هذا الكود مباشرة في مدونتك أو موقعك، وتغيير الألوان والأيقونات لتناسب هويتك البصرية.