اجمل اضافة أزرار الوسائط الاجتماعية مع تأثيرcss

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

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

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

هذا هو شكلهم عند فتح موقع ويب أو صفحة:

الشكل 1

التركيب:

اولا:لينك font-awesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

<div class="media_knopki_hover">
  <a href="#" class="social_vedia_buttons facebook">
  <span class="fa fa-facebook" id="span-facebook"></span>
  </a>
  <a href="#" class="social_vedia_buttons instagram">
  <span class="fa fa-instagram" id="span-instagram"></span>
  </a>
  <a href="#" class="social_vedia_buttons twitter">
  <span class="fa fa-twitter"></span>
  </a>
  <a href="#" class="social_vedia_buttons yelp">
  <span class="fa fa-yelp"></span>
  </a>
  </div>

CSS

. media_knopki_hover {
  position: fixed;
  top: 20px;
  left: 0;
  z-index: 1000;
  transition:all linear 0.2s ;
}

.social_vedia_buttons {
  margin-top: 3px;  
  display: block;
  width: 70px;
  height: 60px;
  color: white;
  font-size: 25px;
  line-height: 60px;
  text-align: center;
  transition:all linear 0.2s ;
}

.social_vedia_buttons:hover {
  width: 100px;
}

.facebook {
  background-color: #2b2929;
  opacity: 0.9;
  border-top: 1px solid #3a3737;
  border-bottom: 1px solid #232121;
  border-top-right-radius: 10px;
}

.facebook:hover {
  background-color: #305891;
  border-bottom-right-radius: 10px;
}

.twitter {
  background-color: #2b2929;
  opacity: 0.9;
  border-bottom: 1px solid black;
}

.twitter:hover {
  background-color: #278eb1;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.instagram {
  background-color: #2b2929;
  opacity: 0.9;
  border-bottom: 1px solid black;
}

.instagram:hover {
  background-color: #234c88;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background: linear-gradient(165deg, #3742bf 20%, #6c2398 40%, #c7266f 60%, #eac764 90%);
}

.yelp {
  background-color: #2b2929;
  opacity: 0.9;
  border-bottom: 1px solid black;
  border-bottom-right-radius: 10px;
}

.yelp:hover {
  background-color: #c71d1d;
  border-top-right-radius: 10px;
}

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

معاينة الذهاب الي الموقع تحميل اضغط هنا

الشكل 2

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

الأزرار الاجتماعية مع CSS3

HTML

<nav class="aseaden-kevadon">
  <ul>
  <li><a href="https://twitter.com/gian_michelle">Twitter <i class="fa fa-twitter"></i></a></li>
  <li><a href="https://facebook.com/">Facebook <i class="fa fa-facebook"></i></a></li>
  <li><a href="http://dribbble.com/gian_michelle">Dribbble <i class="fa fa-dribbble"></i></a></li>
  <li><a href="http://behance.net/gianm">Behance <i class="fa fa-behance"></i></a></li>
  </ul>
  </nav>

css

.aseaden-kevadon {
  position: fixed;
  top: 20px;
}
.aseaden-kevadon ul {
  padding: 0px;
  -webkit-transform: translate(-270px, 0);
  -moz-transform: translate(-270px, 0);
  -ms-transform: translate(-270px, 0);
  -o-transform: translate(-270px, 0);
  transform: translate(-270px, 0);
}
.aseaden-kevadon ul li {
  display: block;
  border: 1.3px solid #888282;
  margin: 3px;
  background: rgba(31, 31, 31, 0.36);
  width: 298px;
  text-align: right;
  padding: 8px;
  -webkit-border-radius: 0 30px 30px 0;
  -moz-border-radius: 0 30px 30px 0;
  border-radius: 0 45px 45px 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.aseaden-kevadon ul li:hover {
  -webkit-transform: translate (110px, 0);
  -moz-transform: translate(110px, 0);
  -ms-transform: translate(110px, 0);
  -o-transform: translate(110px, 0);
  transform: translate(110px, 0);
  background: rgba(255, 255, 255, 0.4);
}
.aseaden-kevadon ul li:hover a {
  color: #fff;
}
.aseaden-kevadon ul li:hover i {
  color: #eceaea;
  background: red;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.aseaden-kevadon ul li i {
  margin-left: 10px;
  color: #191919;
  background: #f1eded;
  padding: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 20px;
  background: #ffffff;
   -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

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

معاينة الذهاب الي الموقع تحميل اضغط هنا

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