ازرار وسائل التواصل الاجتماعية المستديرة والمربعة.

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

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

أريد أن أشارك جمهورًا محترمًا أزرار الوسائط الاجتماعية للموقع في CSS خالص و Font Awesome ، والتي كنت أقوم بتخصيص الأنماط طوال اليوم.

أزرار مواقع التواصل الاجتماعية مستديرة

جلست ليوم واحد في اختيار الظلال والأنماط

لأزرار وسائل التواصل الاجتماعي. الآن أريد أن أشارككم نسختي من أزرار الوسائط الاجتماعية المستديرة:

لإدراج الأزرار في الموقع ، أضف الشبكات الاجتماعية التي تحتاجها عبر الكود.

اولا:كود html 

rrrrrrrrrrrrrrrrrr

<div class="social github">
    <a href="#" target="_blank"><i class="fa fa-github fa-2x"></i></a>
</div>
<div class="social youtube">
    <a href="#" target="_blank"><i class="fa fa-youtube fa-2x"></i></a>
</div>
<div class="social google-pluse">
    <a href="#" target="_blank"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
<div class="social twitter">
    <a href="#" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
</div>
<div class="social instagram">
    <a href="#" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
</div>
<div class="social facebook">
    <a href="#" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>    
</div>
<div class="social skype">
    <a href="#" target="_blank"><i class="fa fa-skype fa-2x"></i></a>
</div>
<div class="social vk">
    <a href="#" target="_blank"><i class="fa fa-vk fa-2x"></i></a>    
</div>
<div class="social odnoklassniki">
    <a href="#" target="_blank"><i class="fa fa-odnoklassniki fa-2x"></i></a>   
</div>
<div class="social pinterest">
    <a href="#" target="_blank"><i class="fa fa-pinterest fa-2x"></i></a>
</div> 
<div class="social linkedin">
    <a href="#" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
</div>
<div class="social telegram">
    <a href="#" target="_blank"><i class="fa fa-paper-plane fa-2x"></i></a>
</div>
<div class="social tumblr">
    <a href="#" target="_blank"><i class="fa fa-tumblr fa-2x"></i></a>
</div>
<div class="social windows">
    <a href="#" target="_blank"><i class="fa fa-windows fa-2x"></i></a>
</div>
<div class="social whatsapp">
    <a href="#" target="_blank"><i class="fa fa-whatsapp fa-2x"></i></a>
</div>
<div class="social weibo">
    <a href="#" target="_blank"><i class="fa fa-weibo fa-2x"></i></a>
</div>
<div class="social dropbox">
    <a href="#" target="_blank"><i class="fa fa-dropbox fa-2x"></i></a>
</div>

بالنسبة لأولئك الذين لا يجيدون لغة HTML ، سأخبرك أن رمز زر شبكة اجتماعية واحد يتكون من ثلاثة أسطر. تبدأ بـ div< class ... وتنتهي <div>

تحتوي فئة علامة div المفتوحة على أسماء الشبكات الاجتماعية باللغة الإنجليزية. يمكن حذف الأزرار غير الضرورية ، ويمكن فرز الأزرار الضرورية بالترتيب الذي يناسبك.

آمل أن تكتشف ذلك بإدخال كود HTML للأزرار.

ارتباط بالشبكة الاجتماعية
الآن ، لإدراج رابط إلى ملفك الشخصي أو قناتك أو مجموعتك ، تحتاج إلى إدراج ارتباط إلى شبكتك الاجتماعية في سمة href # بدلاً من رمز. احرص على عدم إزالة الاقتباس المزدوج قبل الرابط وفي نهايته.

تأكد أيضًا من إضافة بعض CSS لجعل الأزرار تعمل كما في المثال الخاص بي.

css ثانيا:كود

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.social a {
    text-align: center;
    width: 48px;
    height: 48px;
    float: left;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
    border-radius: 24px;
    margin: 0 10px 10px 0;
    padding: 6px;
    color: #000;
}
.github a:hover {background: #191919; color: #fff;}
.youtube a:hover {background: #c4302b; color: #fff;}
.google-pluse a:hover {background: #DD4B39; color: #fff;}
.twitter a:hover {background: #00acee; color: #fff;}
.instagram a:hover {background: #3f729b; color: #fff;}
.facebook a:hover {background: #3b5998; color: #fff;}
.skype a:hover {background: #00aff0; color: #fff;}
.vk a:hover {background: #5d84ae; color: #fff;}
.odnoklassniki a:hover {background: #f93; color: #fff;}
.pinterest a:hover {background: #c8232c; color: #fff;}
.linkedin a:hover {background: #0e76a8; color: #fff;}
.telegram a:hover {background: #249bd7; color: #fff;}
.tumblr a:hover {background: #34526f; color: #fff;}
.windows a:hover {background: #125acd; color: #fff;}
.whatsapp a:hover {background: #50b154; color: #fff;}
.weibo a:hover {background: #d52b2b; color: #fff;}
.dropbox a:hover {background: #1087dd; color: #fff;}

السطر الأول في هذا css هو توصيل خط الأيقونة FontAwesome 4.7.0 عبرimport. إذا كان FontAwesome متصلاً بالفعل بموقعك ، فقم بإزالة هذا الخط.

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

بدءًا من السطر 15 ، توجد أنماط للأزرار. يمكنك حذف الشبكات الاجتماعية غير الضرورية.

على سبيل المثال:

.github a:hover {background: #191919; color: #fff

معاينة الذهاب الي الموقع

مجموعة من الأزرار المربعة

أيضًا ، إذا كنت لا تحب الأزرار الدائرية ، فسأقترح مجموعة متنوعة من الأزرار المربعة:

لاستخدام الأزرار المربعة ، تحتاج إلى كل شيء مثل الأزرار الدائرية ، فقط في CSS استبدل القيمة في السطر10 وبدلاً من:

    border-radius: 24px;

تغيير إلى:

  border-radius: 10px;

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

معاينة الذهاب الي الموقع

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا