كود ايقونات التواصل الاجتماعي

<div class="Social">

<a target="_blank" href="رابط حسابك">

<div class="facebook">

<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-48.png">

</div></a>

<a target="_blank" href="رابط حسابك">

<div class="google"><img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-google-plus-48.png">

</div></a>

<a target="_blank" href="رابط حسابك">

<div class="twitter"><img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-twitter-48.png">

</div></a>

</div>

.Social{

top:200px;

width:50px;

height:200px;

right:0;

position:fixed

}



.Social:hover{

width:120px;

box-shadow:0 0 0    #000 

top:200px;height:200px;

right:0;

position:fixed

}



.facebook{

background-color:   #3b5998 

width:50px;

transition:width .5s ease .15s;

top:200px;

right:0;

position:fixed

}



.facebook:hover{

background-color:   #3b5998 

top:200px;

right:0;

width:120px;

position:fixed;

box-shadow:1px 1px 8px #000

}





.google{

background-color:   #de2f2f 

width:50px;

transition:width .5s ease .15s;

top:250px;

right:0;

position:fixed

}



.google:hover{

background-color:   #de2f2f 

top:250px;

right:0;

width:120px;

position:fixed;

box-shadow:1px 1px 8px #000

}



.twitter{

background-color:   #55acee 

width:50px;

transition:width .5s ease .15s;

top:300px;

right:0;

position:fixed

}



.twitter:hover{

background-color:   #55acee 

top:300px;

right:0;

width:120px;

position:fixed;

box-shadow:1px 1px 8px #000

}