20 زر HTML5 و Bootstrap للوسائط الاجتماعية 2022

أطلق العنان لإمكانيات الشبكات الاجتماعية باستخدام أفضل (وأروع) قوالب الأزرار الاجتماعية - مجانًا.

قمنا بمراجعة العديد من الأزرار والأيقونات المتاحة على الويب ولكننا استقرنا على هذه الأزرار الـ 21.

يمكنك بسهولة العثور على النمط المناسب بسبب تنوع هذه المجموعة.

لا ينتهي هنا.

إذا كنت ترغب في ذلك ، يمكنك أيضًا تجميلها وعلامتها التجارية وفقًا لعملك وموقعك على الويب.

يمكن أن يؤدي تأثير المشاركة الاجتماعية إلى نتائج إيجابية للغاية. لقد رأينا ذلك بأنفسنا حتى في المجالات التي قد لا تحظى بشعبية كبيرة على Facebook و Instagram وما إلى ذلك.

يمكنك استخدام أزرار Bootstrap الاجتماعية هذه لمشاركة كل ما تريد.

كن مؤنس!

أزرار التمهيد V15.0

لدينا العديد من الأشكال المختلفة للأزرار من أجلك ولكننا قررنا تضمين تلك التي ستفيدك أكثر. ستلاحظ أيضًا أن المجموعات تتضمن أزرارًا متعددة ، وليس فقط أزرار الوسائط الاجتماعية.

تربح وقتًا كبيرًا.

من المحتمل أن تكون Bootstrap Buttons V15 هي مجموعتي المفضلة من القائمة. تأتي الأزرار الاجتماعية بتنسيقين مختلفين مع تأثير ظل رائع يختفي عند التحويم.

تحميل

أزرار التمهيد V18

Bootstrap Buttons V18 عبارة عن مجموعة من الأزرار المختلفة جدًا عن الأزرار الأخرى. ومع ذلك ، يمكنك الحصول على بعض الطرق التقليدية أيضًا ، بحيث يمكنك اختيار المسار الذي تريده.

حتى إذا لم تلاحظ ذلك في العرض الأول ، فإن كل زر يتضمن أيضًا ظلًا يُنشئ تأثير نقرة رائعًا (عن طريق التلاشي).

يمكنك تجربتها بنفسك من خلال زيارة صفحة المعاينة التجريبية الحية.

تحميل

أزرار التمهيد V13.0

على الرغم من أن Bootstrap Buttons V13 على خلفية داكنة ، يمكنك استخدامها مع أنماط الخلفيات الأخرى. لا تحتاج دائمًا إلى اتباع التكوينات الافتراضية.

لا تتردد في الذهاب عكس التيار.

هنا تحصل على العديد من أنماط أزرار الوسائط الاجتماعية المختلفة ، لذلك ستجد بالتأكيد التصميم الذي يناسبك بشكل أفضل . يأتي نصفها بلون خالص والنصف الآخر بمخطط.

تحميل

أزرار التمهيد V01.0

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

إلى جانب التباين مع بنية اللون الصلب ، هناك أيضًا تلك التي تحتوي على مخطط تفصيلي فقط.

علاوة على ذلك ، يأتي كلا الإصدارين بتأثير CLICK الذي يعمل عن طريق إزالة الظل.

تحميل

Fancy Flat Social Button Animation بواسطة Colorlib

يأخذ Colorlib الرسوم المتحركة الرائعة CSS3 إلى المستوى التالي من خلال مجموعة أيقوناته الاجتماعية Fancy Flat Animated. لدينا رموز الشبكات الاجتماعية الرائدة LinkedIn و Twitter و Instagram و Youtube و Github و Facebook بخلفيات مربعة بسيطة مدمجة .

تتوفر أيضًا العديد من الرموز الأخرى بفضل مكتبة Font Awesome المتاحة لك.

عند التمرير / النقر فوق كل رمز من الرموز ، يتم تشغيل حركة معينة تقوم بتحويل الرموز إلى دائرة بدلاً من المربع الافتراضي. يمكن أن يكون هذا إضافة رائعة إلى موقع ويب ديناميكي وتفاعلي بالفعل.

تحميل

الأزرار الاجتماعية متحركة مع Sass

بعد ذلك ، لدينا رمز اجتماعي متحرك SASS تم تعيينه من Colorlib والذي يتميز بتلميحات أدوات محددة لكل رمز.

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

تتوفر الرموز أيضًا لـ GitHub و Email و Facebook و LinkedIn و Twitter و Instagram و Youtube والشبكات الاجتماعية الأخرى القائمة على Font Awesome .

بالإضافة إلى ذلك ، فإن نظام الألوان الافتراضي هو خلفية رمادية مع نص رمز أبيض.

تحميل

Font Awesome Social Buttons المدعوم من Bootstrap

أخيرًا ، لدينا مزيج من إطارين شائعين جدًا على الويب - Bootstrap و Font Awesome.

تخيل لو كان هذان الشخصان قد رزقا بطفل ، فما الذي ستحصل عليه من مجموعة الرموز الرائعة هذه من ستان ويليامز. ستمتد هذه الرموز إلى ما يصل إلى GitHub و Apple و Android و Skype و Stack Overflow ومكتبة Font Awesome الكاملة التي تضم مئات الرموز.

هذه هي المجموعة التي يجب اكتسابها إذا كنت بحاجة إلى لون وعبارات صارمة لاحتياجاتك الاجتماعية.

تحميل

الحد الأدنى من أزرار CSS / HTML الاجتماعية بواسطة Colorlib

إليك بعض الرموز الاجتماعية الأنيقة من Colorlib. تحتوي هذه المجموعة على أيقونة باللون الرمادي تم تعيينها على Facebook و Twitter و Instagram و Youtube و Behance ومئات أخرى.

أضاف Colorlib حدًا سهلًا لإزالة الحدود مما يجعل الرموز تبدو أكثر إحكاما وسيكون دمجها في التصميمات أسهل بكثير.

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

تحميل

الأزرار الاجتماعية مع التمرير المنزلق

إنه لأمر رائع أن ترى تطور الويب وخاصة جوانب تصميم لغات مثل CSS3 و HTML5. إليك مجموعة أيقونات جميلة وحديثة قادمة من Colorlib.

تحتوي هذه المجموعة على أربع شبكات اجتماعية رئيسية (لينكد إن ، وتويتر ، وفيسبوك) بترتيب جميل من الألوان وحالة تخطيط محاصر لحفظ الرموز بداخلها.

تم تصميم تأثير التمرير لمساعدتك على إخفاء أدوات مشاركة الشبكة الاجتماعية الافتراضية بأيقونات اجتماعية أكثر جاذبية.

عند التمرير فوق الإصدار الخاص بك من الرموز ، سيتمكن المستخدم من رؤية أزرار الإعجاب والمشاركة والتغريد المباشرة بأعداد مشاركة حقيقية!

تحميل

مشاركة الازرار الاجتماعية

تشارك Colorlib مجموعة أزرار مشاركة اجتماعية خفيفة الوزن جدًا تستخدم HTML5 لتوفير ميزة رائعة جدًا.

يمكنك الحصول على عنصر واجهة مستخدم بسيط "رمز المشاركة" لإضافته إلى موقعك ، ولكن عند النقر فوق الأداة ، يمكن استخدام العديد من مواقع الشبكات الاجتماعية EXPANDS لمشاركة المحتوى أو الترويج لملفات تعريف الوسائط الاجتماعية الخاصة بك.

في نمط Colorlib المعتاد ، تأتي هذه الأيقونات مع مكتبة Font Awesome كاملة بها جميع أيقوناتها المائة.

تحميل

أزرار اجتماعية أنيقة

يجلب لنا Chris Deacy مجموعة من الرموز الاجتماعية الأنيقة التي ستوفر تأثيرات خلفية تحوم لأقصى قدر من التفاعل بين الرموز والمستخدم.

توفر كل مجموعة من الرموز الاجتماعية العديد من الرموز الخاصة بالشبكات الاجتماعية ، وفي هذا الرمز نجد Twitter و Facebook و Skype و Dribble.

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

ميزة رائعة لن تمر مرور الكرام !

تحميل

الأزرار الاجتماعية باستخدام HTML فقط

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

نتفق أيضًا على أن هذه الرموز ستفيد أي مشروع على نطاق واسع ، لذلك لا تدع نفسك مقيدًا بمفهوم HTML فقط.

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

يتراوح توافر أيقونات الوسائط الاجتماعية من Pinterest إلى VKontakte و Facebook و Twitter و OTHERS.

تحميل

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

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

وبمجرد أن يحلقوا فوقهم ، سوف تمر الإثارة عبر السقف.

لماذا ا؟ لأنني أخبرك بشيء واحد - لم يكونوا يتوقعونه!

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

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

تحميل

أيقونات اجتماعية متحركة

المزيد من أيقونات الوسائط الاجتماعية المتحركة في طريقك. هذه المجموعة الخاصة تهز نفس التأثير لجميع الرموز ، سواء كانت Facebook أو Twitter أو Pinterest أو YouTube.

عندما تحوم فوقها بمؤشر الماوس ، فإنها تدور . هذا القالب سيفي بالغرض لشيء أساسي أكثر قليلاً.

اسمح لموقعك على الويب أو مدونتك أو متجرك عبر الإنترنت برموز وسائط اجتماعية ليست مملة.

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

تحميل

أزرار وأيقونات CSS الاجتماعية

نعترف بأن العديد من مجموعات الرموز الموجودة في قائمتنا مذهلة بالفعل وستوفر تجربة مشاركة اجتماعية رائعة لملايين مستخدمي الويب.

ستحدث هذه المجموعة الضخمة من الأزرار والأيقونات الاجتماعية لـ CSS3 ثورة في طريقة عرض معلومات الوسائط الاجتماعية الخاصة بك على مواقع الويب والتطبيقات والمشاريع والمدونات وما إلى ذلك.

من أزرار Evernote البسيطة ، إلى المزيد من الأزرار الفنية مثل "قراءة المزيد في Smashing Magazine" ، أو "Available on the App Store" وما شابه.

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

تحميل

الأزرار الاجتماعية الدائرية

تعتبر الرموز المربعة مهيمنة جدًا في سوق مجموعة الرموز الاجتماعية الحالية.

يريد شاهنور علم المساعدة في تغيير ذلك من خلال توفير (بناء نفسه) عددًا كبيرًا من الرموز الاجتماعية المستديرة للشبكات الاجتماعية الأكثر شعبية.

تظهر هذه المجموعة الخاصة على مواقع الكاتب الحد الأدنى ، والمجلات الشخصية ، وما إلى ذلك.

تحميل

الأزرار الاجتماعية مع خطوط الرموز

يعمل David Pottrell على تطوير ومشاركة الأشياء لفترة طويلة الآن. تعد الأزرار الاجتماعية الخاصة به مع خطوط الرموز المضمنة من بين أكثر عمليات التنفيذ سلاسة لمفهوم مجموعة الرموز هذا.

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

نحن في غاية الرهبة من مهارات HTML5 و CSS3 التي يلفت ديفيد انتباهنا إليها.

تحميل

زر FLAT Beauty Social مع انتقال CSS3

لم يكن تصميم FLAT متسقًا في تقريرنا هنا. لكننا سنحاول إصلاح ذلك من خلال تقديم بعض الأعمال الرائعة والرائعة حقًا من SMTashrik Anam.

إنه يريد توفير أيقونات تستخدم تأثيرات انتقال CSS3 لتضخيم تجربة مشاركة اجتماعية ديناميكية وتفاعلية.

قم بتمرير كل رمز من الرموز وشاهد كيف تتكشف لكشف النص المحدد الذي تختاره.

تحميل

أزرار اجتماعية مبسطة CSS

البساطة لا تخيب أبدًا ، على الرغم من أن البعض قد يسمي هذه المجموعة المعينة بأنها حديثة ومعقدة إلى حد ما . نعتقد حقًا أن هذه واحدة من أبسط المجموعات الاجتماعية في قائمتنا حتى الآن.

يمكنك استخدام هذا النموذج بدلاً من أزرار المشاركة الاجتماعية المباشرة داخل صفحات المحتوى الخاصة بنا. سيعمل هذا بشكل جيد بشكل خاص في المواقف التي نريد فيها الترويج لملفاتنا الشخصية. تدعم هذه الحزمة Forrst و Dribbble و Flickr و Designmoo وغيرها الكثير.

خذ بعض الوقت للتحقق من ذلك وربما اختبره على موقعك قبل اتخاذ القرار النهائي.

تحميل

يتدحرج الأزرار الاجتماعية

مجموعة أيقونات Roll Over تحتوي على أيقونات Soundcloud و Pinterest و Facebook و YouTube و Twitter.

ستسمح لك هذه الرموز بإدراج نص متدرج . ستظهر هذه النصوص في أي وقت يتدحرج فيه الزائر فوق أحد الرموز من هذه المجموعة.

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

تحميل

الرموز الاجتماعية المذكورة أعلاه والمستندة إلى HTML / CSS. إذا كنت تبحث عن تلك التي يمكنك استخدامها في Adobe Photoshop أو Illustrator أو غير ذلك ، فقد ترغب في التحقق من مجموعة الرموز هذه.