اضافة ازرار التواصل الاجتماعي بتأثيرات مذهله

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته.

ازرار التواصل الاجتماعي من الاضافات التي تلعب دور هام في الموقع فهي وبواسطتها يتواصل الزوار معك ومع موقعك ويتم نشر التدوينات ويتم متابعت موقعك في هذه الشبكات الاجتماعيه , فعند اضافتك لهذه الازرار يجب ان تكون جذابة للزائر .

مثال مباشر :

صورة :

الاكواد :

اكواد html :

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul class="social-nav model-0">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-1">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-2">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-3">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-4">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-5">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-6">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-7">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-8">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-9">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-3d-0">
<li><a href="#" class="twitter">
<div class="front"><i class="fa fa-twitter"></i></div>
<div class="back"><i class="fa fa-twitter"></i></div></a></li>
<li><a href="#" class="facebook">
<div class="fornt"><i class="fa fa-facebook"></i></div>
<div class="back"><i class="fa fa-facebook"></i></div></a></li>
<li><a href="#" class="google-plus">
<div class="front"><i class="fa fa-google-plus"></i></div>
<div class="back"><i class="fa fa-google-plus"></i></div></a></li>
<li><a href="#" class="linkedin">
<div class="front"><i class="fa fa-linkedin"></i></div>
<div class="back"><i class="fa fa-linkedin"></i></div></a></li>
<li><a href="#" class="pinteres">
<div class="front"><i class="fa fa-pinterest-p"></i></div>
<div class="back"><i class="fa fa-pinterest-p"></i></div></a></li></ul><br/>
<ul class="social-nav model-3d-1">
<li><a href="#" class="twitter">
<div class="front"><i class="fa fa-twitter"></i></div>
<div class="back"><i class="fa fa-twitter"></i></div></a></li>
<li><a href="#" class="facebook">
<div class="fornt"><i class="fa fa-facebook"></i></div>
<div class="back"><i class="fa fa-facebook"></i></div></a></li>
<li><a href="#" class="google-plus">
<div class="front"><i class="fa fa-google-plus"></i></div>
<div class="back"><i class="fa fa-google-plus"></i></div></a></li>
<li><a href="#" class="linkedin">
<div class="front"><i class="fa fa-linkedin"></i></div>
<div class="back"><i class="fa fa-linkedin"></i></div></a></li>
<li><a href="#" class="pinteres">
<div class="front"><i class="fa fa-pinterest-p"></i></div>
<div class="back"><i class="fa fa-pinterest-p"></i></div></a></li></ul><br/>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

اكواد css :

@import "compass/css3";
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
font-family:arial;
}
body{
background: #404040;;
padding:0;
margin:0;
text-align: center;
font-family: arial;
color: #fff;
}
/*=====================*/
$fb-cl:#3B579D;
$twt-cl:#00ACED;
$gp-cl:#DD4A3A;
$in-cl:#007BB6;
$pin-cl:#CB2026;
@function shadow($color) {
$val: 0px 0px $color;
@for $i from 1 through 30 {
$val: #{$val}, #{$i}px #{$i}px #{$color};
}
@return $val;
}

.social-nav{
padding: 0;
list-style: none;
display: inline-block;
margin:10px auto;
li{
display: inline-block;
}
a {
display: inline-block;
float: left;
width: 48px;
height: 48px;
font-size: 20px;
color: #FFF;
text-decoration: none;
cursor: pointer;
text-align: center;
line-height: 48px;
background: #000;
position: relative;
@include transition(.5s);
}
}

.model-0{
position: absolute;
@include transition(.5s);
left:0;
top: 50px;
li{
float: none;
display: block;
}
a{
&:hover{
padding-left: 20px;
width:65px;
}
}
.twitter{ background:$twt-cl}
.facebook{ background:$fb-cl}
.google-plus{background:$gp-cl}
.linkedin{background:$in-cl}
.pinterest{ background:$pin-cl}
}
.model-1{
li{margin:0 2px ;}
a{
background: #fff;
@include transition(transform 1s, background .4s);
@include border-radius(100%);
&:hover{
@include translateY(-10px);
}
}
.twitter{ color:$twt-cl}
.facebook{color:$fb-cl}
.google-plus{color:$gp-cl;}
.linkedin{color:$in-cl}
.pinterest{color:$pin-cl}
}
.model-2{
a{
overflow: hidden;
font-size: 26px;
@include border-radius(4px);
margin:0 5px;
&:hover{
background: #fff;
@include text-shadow( shadow(darken(#eee, 10%)));
}
}

.twitter{
background:$twt-cl;
@include text-shadow( shadow(darken($twt-cl, 10%)));
&:hover{color:$twt-cl;}
}
.facebook{
background:$fb-cl;
@include text-shadow( shadow(darken($fb-cl, 10%)));
&:hover{ color:$fb-cl}
}
.google-plus{
background:$gp-cl;
@include text-shadow( shadow(darken($gp-cl, 10%)));
&:hover{ color:$gp-cl}
}
.linkedin{
background:$in-cl;
@include text-shadow( shadow(darken($in-cl, 10%)));
&:hover{ color:$in-cl}
}
.pinterest{
background:$pin-cl;
@include text-shadow( shadow(darken($pin-cl, 10%)));
&:hover{ color:$pin-cl}
}
}
.model-3{
margin-bottom: 50px;
a{
background: #fff;
@include transition(padding .4s);
margin: 0 5px;
&:after{
content: '';
position: absolute ;
border:24px solid #fff;
z-index: -1;
border-bottom-color:transparent !important;
left: 0;
top:60%;
@include transition(transform .4s);
}
&:hover{
color: #fff;
padding-top: 10px;
&:after{
@include translateY(10px);
}
}
}

.twitter{
color:$twt-cl;
&:hover{ background:$twt-cl;
&:after{border-color: $twt-cl}
}
}
.facebook{
color:$fb-cl;
&:hover{ background:$fb-cl;
&:after{border-color: $fb-cl}
}
}
.google-plus{
color:$gp-cl;
&:hover{ background:$gp-cl;
&:after{border-color: $gp-cl}
}
}
.linkedin{
color:$in-cl;
&:hover{ background:$in-cl;
&:after{border-color: $in-cl}
}
}
.pinterest{
color:$pin-cl;
&:hover{ background:$pin-cl;
&:after{border-color: $pin-cl}
}
}
}
.model-4{
li{margin:0 2px ;}
a{
background:none;
line-height: 1.5;
font-size: 32px;
@include text-shadow(0px 0px 1px );
&:hover{
@include text-shadow(0px 0px 25px );
}
}
.twitter{ color:$twt-cl}
.facebook{color:$fb-cl}
.google-plus{color:$gp-cl;}
.linkedin{color:$in-cl}
.pinterest{color:$pin-cl}
}
.model-5{
li{float: left;}
a{background: #222;}
.twitter:hover{ color:$twt-cl}
.facebook:hover{color:$fb-cl}
.google-plus:hover{color:$gp-cl}
.linkedin:hover{color:$in-cl}
.pinterest:hover{color:$pin-cl}
}
.model-6{
li{float: left;}
a{
&:hover{background: #fff;}
}
.twitter{
background:$twt-cl;
&:hover{ color:$twt-cl}
}
.facebook{
background:$fb-cl;
&:hover{ color:$fb-cl}
}
.google-plus{
background:$gp-cl;
&:hover{color:$gp-cl}
}
.linkedin{
background:$in-cl;
&:hover{ color:$in-cl}
}
.pinterest{
background:$pin-cl;
&:hover{ color:$pin-cl}
}
}
.model-7{
li{margin:0 10px ;}
a{
background: none;
@include box-shadow(0 0 4px 3px);
@include text-shadow(0 0 1px #333);
@include transition(transform .4s, background .4s);
@include border-radius(100%);
.fa{ @include transition(transform 1s)}
&:hover{
background: #fff;
.fa{ @include transform( rotate(-10deg) scale(3))}
}
}
.twitter{ color:$twt-cl}
.facebook{color:$fb-cl}
.google-plus{color:$gp-cl;}
.linkedin{color:$in-cl}
.pinterest{color:$pin-cl}
}
.model-8{
a{
background: #FFF;
&:hover{
@include box-shadow(0 48px 0 inset);
&> .fa{color:#fff}
}
}
.twitter{
color:$twt-cl;
&:hover{ color:$twt-cl}
}
.facebook{
color:$fb-cl;
&:hover{color:$fb-cl}
}
.google-plus{
color:$gp-cl;
&:hover{ color:$gp-cl}
}
.linkedin{
color:$in-cl;
&:hover{ color:$in-cl}
}
.pinterest{
color:$pin-cl;
&:hover{color:$pin-cl}
}
}
.model-9{
li{margin:0 10px ;}
a{
color: #fff;
overflow: hidden;
@include border-radius(100%);
&:hover{
background: #fff;

}
}
.twitter{
background:$twt-cl;
&:hover{ color:$twt-cl}
}
.facebook{
background:$fb-cl;
&:hover{ color:$fb-cl}
}
.google-plus{
background:$gp-cl;
&:hover{color:$gp-cl}
}
.linkedin{
background:$in-cl;
&:hover{ color:$in-cl}
}
.pinterest{
background:$pin-cl;
&:hover{ color:$pin-cl}
}
}
.model-3d-0{
a {
background: #333;
float: left;
margin:0 10px;
@include transform-style(preserve-3d);
&:hover {
@include rotateX(-90deg);
.fornt{ @include backface-visibility (hidden);}
.back{ @include backface-visibility (visible);}
}
}
.front , .back{
width: 48px;
height: 48px;
background: #333;
position: absolute;
top: 0;
left: 0;
@include translateZ(18px);
@include backface-visibility (visible);
}
.back {
font-size: 32px;
@include transform(rotateX(90deg) translateZ(18px));
@include backface-visibility (hidden);
}
.twitter .back { background: $twt-cl }
.facebook .back { background: $fb-cl }
.google-plus .back { background: $gp-cl}
.linkedin .back { background: $in-cl}
.pinterest .back { background: $pin-cl}
}
.model-3d-1{
a {
background: #fff;
color:#666;
float: left;
margin:0 10px;
@include border-radius(100%);
&:hover {
color: #fff;
@include rotateY(-180deg);
.fornt{ @include backface-visibility (hidden);}
.back{ @include backface-visibility (visible);}
}
}
.front , .back{
width: 48px;
height: 48px;
position: absolute;
top: 0;
left: 0;
@include border-radius(100%);
@include backface-visibility (visible);
}
.back {
@include rotateY(-180deg);
@include backface-visibility (hidden);
}
.twitter .back { background: $twt-cl }
.facebook .back { background: $fb-cl }
.google-plus .back { background: $gp-cl}
.linkedin .back { background: $in-cl}
.pinterest .back { background: $pin-cl}
}