كيفية تصميم أزرار الوسائط الاجتماعية مع الرسوم المتحركة باستخدام HTML CSS

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

 

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

 

في هذا البرنامج (Awesome Social Media Buttons with Hover Animation) ، في البداية ، على صفحة الويب ، تظهر خمسة رموز أو أزرار لشبكات التواصل الاجتماعي المختلفة وعندما تحوم فوق الزر المعين ، يتم توسيع عرض هذا الزر بسلاسة ومرئية اسم شبكة تحوم معينة. تم إنشاء حركة التمرير هذه بالكامل باستخدام HTML و CSS فقط.

 

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل على هذا البرنامج (Awesome Social Media Buttons with Hover Animation).

 

في هذا الفيديو ، شاهدت الرسوم المتحركة لأزرار الوسائط الاجتماعية هذه وآمل أن تكون قد فهمت الرموز وراء إنشاء هذه الرسوم المتحركة. إذا كنت تعرف HTML و CSS الأساسيين ، فيمكنك بسهولة فهم رموز هذا البرنامج ويمكنك أيضًا إنشاء هذا النوع من الرسوم المتحركة. يمكنك استخدام علامة ارتساء HTML <a> وإدراج رابط حساب التواصل الاجتماعي الخاص بك داخل السمة href لعلامة <a> لإعادة توجيه المستخدم إلى ملف تعريف الوسائط الاجتماعية المحدد.

 

إذا كنت تحب هذا البرنامج (Awesome Social Media Buttons with Hover Animation) وترغب في الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج. للحصول على أكواد المصدر ، تحتاج فقط إلى التمرير لأسفل.

 

أزرار الوسائط الاجتماعية مع تحريك الرسوم المتحركة

لإنشاء هذا البرنامج (Awesome Social Media Buttons with Hover Animation). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل