<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
}
تحميل محتوى الموضوع
عرض نسخة صالحة للطباعة
أرسل هذا الموضوع إلى صديق