21 HTML5 & Bootstrap Social Buttons Templates 2021
نشرت: 2021-07-22أطلق العنان لإمكانيات الشبكات الاجتماعية باستخدام أفضل (وأروع) قوالب الأزرار الاجتماعية - مجانًا.
قمنا بمراجعة أكوام من الأزرار والأيقونات المتوفرة على الويب ولكننا استقرنا على هذه الأزرار الـ 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
على سبيل المثال ، عندما يحوم شخص ما فوق أحد الرموز ، سيتلقى على الفور تلميحًا لإخطارًا يوضح ما يدور حوله هذا الرمز ، ويمكنك تخصيصه بالكامل ليعكس أفكارك ورسائلك الخاصة ، أو اتركها بشكل افتراضي مع تحديد الشبكة الاجتماعية .
تتوفر الرموز أيضًا لـ GitHub و Email و Facebook و LinkedIn Twitter و Instagram و Youtube وأي شبكات اجتماعية أخرى لأنها تستند إلى Font Awesome .
بالإضافة إلى ذلك ، فإن نظام الألوان الافتراضي هو خلفية رمادية مع نص رمز أبيض.
Font Awesome Social Buttons المدعوم من Bootstrap
تخيل لو كان هذان الشخصان قد رزقا بطفل ، فإن ما ستحصل عليه في المقابل هو مجموعة أيقونات رائعة من ستان ويليامز. ستمتد هذه الرموز إلى ما يصل إلى GitHub و Apple و Android و Skype و Stack Overflow ومكتبة Font Awesome الكاملة التي تضم مئات الرموز.
إذا كنت في حاجة إلى اللون والعبارات الصارمة لاحتياجاتك الاجتماعية ، فهذه هي المجموعة التي يجب اكتسابها.
الحد الأدنى من أزرار CSS / HTML الاجتماعية بواسطة Colorlib
إليك بعض الرموز الاجتماعية الأنيقة من Colorlib. تحتوي هذه المجموعة على أيقونة باللون الرمادي تم تعيينها على Facebook و Twitter و Instagram و Youtube و Behance ومئات أخرى.
أضاف Colorlib حدًا سهلًا لإزالة الحدود مما يجعل الرموز تبدو أكثر إحكاما وسيكون دمجها في التصميمات أسهل بكثير.
ومع ذلك ، يمكنك دائمًا إزالة الحدود واستخدام الرموز كما تريد. على سبيل المثال ، في قوائم التنقل في التذييل أو الرأس ، أو مباشرة داخل مناطق المحتوى الخاصة بك.
الأزرار الاجتماعية مع التمرير المنزلق
إنه لأمر رائع أن ترى تطور الويب وخاصة جوانب تصميم لغات مثل CSS3 و HTML5. إليك مجموعة أيقونات جميلة وحديثة قادمة من Colorlib.
تحتوي هذه المجموعة على أربع شبكات اجتماعية رئيسية (لينكد إن ، وتويتر ، وفيسبوك) بترتيب جميل من الألوان وحالة تخطيط محاصر لحفظ الرموز بداخلها.
تم تصميم تأثير التمرير لمساعدتك على إخفاء أدوات مشاركة الشبكة الاجتماعية الافتراضية بأيقونات اجتماعية أكثر جاذبية.
عند التمرير فوق الإصدار الخاص بك من الرموز ، سيتمكن المستخدم من رؤية أزرار الإعجاب والمشاركة والتغريد المباشرة بأعداد مشاركة حقيقية!
مشاركة الازرار الاجتماعية
تشارك Colorlib معنا مجموعة أزرار مشاركة اجتماعية خفيفة الوزن جدًا تستخدم HTML5 لتوفير ميزة رائعة جدًا.
بشكل أساسي ، تحصل على عنصر واجهة مستخدم بسيط "رمز المشاركة" لإضافته إلى موقعك ، ولكن عند النقر فوق الأداة ، يتم توسيع عدد من مواقع الشبكات الاجتماعية التي يمكن استخدامها لمشاركة المحتوى أو للترويج لملفات تعريف الوسائط الاجتماعية الخاصة بك.
في نمط Colorlib المعتاد ، تأتي هذه الأيقونات مع مكتبة Font Awesome كاملة مع كل أيقوناتها المائة.
أزرار اجتماعية أنيقة
يجلب لنا Chris Deacy مجموعة من الرموز الاجتماعية الأنيقة التي ستوفر تأثيرات خلفية تحوم لأقصى قدر من التفاعل بين الرموز والمستخدم.
توفر كل مجموعة من الرموز الاجتماعية عددًا من الرموز الخاصة بالشبكات الاجتماعية ، وفي هذا الرمز نجد Twitter و Facebook و Skype و Dribble.
في كل مرة تقوم فيها بالتمرير فوق أحد الرموز ، تمتلئ خلفية الرمز باللون الأكثر شيوعًا في كل شبكة من الشبكات الاجتماعية.
ميزة رائعة لن تمر مرور الكرام !
الأزرار الاجتماعية باستخدام HTML فقط
تعد مجموعة الرموز الاجتماعية بتنسيق HTML فقط من OstrIO الحل الأمثل لمشرفي المواقع والمصممين والمطورين الذين يحتاجون إلى حل خفيف لمشاركة الوسائط الاجتماعية لمواقعهم الإلكترونية المبسطة.
نحن نتفق أيضًا على أن هذه الرموز ستفيد أي مشروع على نطاق واسع ، لذلك لا تدع نفسك مقيدًا بمفهوم HTML فقط.
علاوة على ذلك ، تحتوي هذه المجموعة على أربع مجموعات أحجام مختلفة أيضًا ، مما يجعل من السهل جدًا دمجها في مواقع الويب بجميع الأحجام والأشكال.
يتراوح توافر أيقونات الوسائط الاجتماعية من Pinterest إلى VKontakte و Facebook و Twitter و OTHERS.
تحوم فوق الأزرار الاجتماعية
إذا كنت ترغب في إضفاء الإثارة على الأشياء باستخدام أيقونات الوسائط الاجتماعية الرائعة على موقع الويب الخاص بك ، فهذه بالتأكيد ستؤدي الحيلة. مع تأثير التحويم الأنيق لهم ، قد تبدو أساسية جدًا للوهلة الأولى ، ولكن ليس كثيرًا عندما يضربها مؤشر الماوس.
Facebook ، Pinterest ، LinkedIn ، YouTube Behance ، سمها ما شئت ، هناك العديد من الحلول التي تقدمها لك هذه المجموعة.
يحتوي كل زر تقريبًا على تأثير تمرير مختلف عليه ، لذا تابع وتوجه إلى المعاينة وتحقق منها بنفسك. سوف تستمتع بهذا إذا كنت تريد أن تبقي الأمور بسيطة ومبدعة.
أزرار الوسائط الاجتماعية المتحركة
لا تحتوي أزرار الوسائط الاجتماعية هذه فقط على رسوم متحركة أنيقة ، ولكنها تأتي أيضًا بتأثير متدرج رائع. بمجرد الوصول إلى موقع الويب أو المدونة الخاصة بك ، سيلاحظها جميع زوار موقعك دون أدنى شك.
وبمجرد أن يحلقوا فوقهم ، سوف تمر الإثارة عبر السقف.
لماذا ا؟ لأنني أخبرك بشيء واحد - لم يكونوا يتوقعونه!
على الرغم من أنك تحب أن يكون تواجدك على الإنترنت أنيقًا ومرتبًا ، يمكنك دائمًا إثراء الأشياء بتفاصيل صغيرة ، مثل أيقونات الوسائط الاجتماعية.
لن يفسدوا صفحتك بأي دراما ، بل يعززون التجربة.
أيقونات اجتماعية متحركة
المزيد من أيقونات الوسائط الاجتماعية المتحركة في طريقك. هذه المجموعة المعينة تهز نفس التأثير لجميع الرموز ، سواء كانت 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 أنعم.
إنه يريد توفير أيقونات تستخدم تأثيرات انتقال CSS3 لتضخيم تجربة مشاركة اجتماعية ديناميكية وتفاعلية.
قم بتمرير كل رمز من الرموز وشاهد كيف تتكشف لكشف النص المحدد الذي تختاره.
أزرار اجتماعية مبسطة CSS
البساطة لا تخيب أبدًا ، على الرغم من أن البعض قد يسمي هذه المجموعة المعينة بأنها حديثة ومعقدة إلى حد ما . نعتقد حقًا أن هذه واحدة من أبسط المجموعات الاجتماعية في قائمتنا حتى الآن.
سيعمل هذا بشكل جيد بشكل خاص في المواقف التي نريد فيها الترويج لملفاتنا الشخصية. يمكنك استخدام هذا النموذج بدلاً من أزرار المشاركة الاجتماعية المباشرة داخل صفحات المحتوى الخاصة بنا. تدعم هذه الحزمة Forrst و Dribbble و Flickr و Designmoo وغيرها الكثير.
خذ بعض الوقت للتحقق من ذلك وربما اختبره على موقعك الخاص قبل اتخاذ القرار النهائي.
يتدحرج الأزرار الاجتماعية
مجموعة أيقونات Roll Over تحتوي على أيقونات Soundcloud و Pinterest و Facebook و YouTube و Twitter.
ستسمح لك هذه الرموز بإدراج نص متدرج . ستظهر هذه النصوص في أي وقت يتدحرج فيه الزائر فوق أحد الرموز من هذه المجموعة.
تم تصميم هذا الجهاز بواسطة Hugo Darby-Brown. استخدم تقنية CSS3 النقية لصياغة هذا النموذج ولتوفير تجربة مشاركة ممتعة.
الرموز الاجتماعية المذكورة أعلاه والمستندة إلى HTML / CSS. إذا كنت تبحث عن تلك التي يمكنك استخدامها في Adobe Photoshop أو Illustrator أو غير ذلك ، فقد ترغب في التحقق من مجموعة الرموز هذه.