مكتبة كاملة لــ ايقونات التواصل الاجتماعية لموقعك

الأيقونات الاجتماعية في CSS (Social Buttons)

HTML

HTML CSS

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

البنية الأساسية

رأس الصفحة Head: يحتوي على رابط لملف CSS من مستودع GitHub الذي يحدد أنماط الأزرار.

<link href='https://raw.githack.com/Sami20a/social-buttons/main/style.css' rel='stylesheet' type='text/css'/>

الجسم (Body): ينقسم إلى عدة أقسام تعرض أنواع مختلفة من الأزرار.

أقسام الصفحة الرئيسية

قسم الأزرار الافتراضية

يعرض الأزرار الأساسية بدون تعديلات:

        
<a href="#" class="sb twitter">Twitter</a>
<a href="#" class="sb facebook">Facebook</a>
... وغيرها
        
    

قسم الأحجام (Dimensions)

يعرض الأزرار بثلاثة أحجام مختلفة: small, default, large

        
<a href="#" class="sb small twitter">Twitter</a>
<a href="#" class="sb twitter">Twitter</a>
<a href="#" class="sb large twitter">Twitter</a>
        
    

قسم الأنماط (Styles)

يعرض الأزرار بأنماط مختلفة مثل:

• min: نسخة مصغرة
• flat: تصميم مسطح
• circle: دائري
• embossed: بارز
• pressed: مضغوط
• thick-border: حدود سميكة
• no-border: بدون حدود
• no-shadow: بدون ظل
• gradient: متدرج اللون
• glossy: لامع
• text: مع نص

قسم الألوان + الأنماط

يعرض مجموعات من الألوان والأنماط معاً مثل:

• أزرار متدرجة لامعة بارزة (gradient glossy embossed)
• أزرار دائرية بدون حدود أو ظل (circle no-border no-shadow)
• أزرار مسطحة مع نص (flat text)
• وغيرها من التركيبات

قسم مخصص

يعرض:

• أيقونات مضافة مثل YouTube وEmail
• أيقونات مخصصة مثل Retweet وPhoto وComment

كيفية عمل الأزرار

كل زر يستخدم فئة sb (اختصار لـ Social Button) ثم يضاف لها:

• نوع الزر: مثل twitter, facebook, heart, etc.
• الحجم (اختياري): small, large (الإفتراضي متوسط)
• النمط (اختياري): min, flat, circle, etc.
• اللون (اختياري): blue, red, green, etc. (الإفتراضي لون الشبكة الاجتماعية)
• خصائص إضافية: text, no-border, etc.

أمثلة على التركيبات

زر تويتر دائري كبير أزرق:

        
<a href="#" class="sb circle large blue twitter">Twitter</a>
        
    

زر فيسبوك مسطح مع نص:

        
<a href="#" class="sb flat text facebook">Facebook</a>
        
    

زر قلب أحمر كبير بارز:

        
<a href="#" class="sb large red embossed heart">Heart</a>
        
    

ملاحظات تقنية

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

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

معــاينـــة

كيف كان المقال؟