3 buton olacak şekilde genişlikleri tekrar ayarladım. Harflerin olduğu yerlere font awesome ikon kodlarını koyarsan olacaktır diye düşünüyorum. Diğer renkler için yine class açmalısın. Sosyal Medya renklerine
şu adresten bakabilirsin. Bir de, iç içe kodlar için boşlukları tab ile bırakman daha iyi olur. Yaptığın şekilde kodlar çalışmaz hale gelmekte.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
#Paylas #PaylasYazi {
height: 34px;
line-height: 34px;
font-size: 16px;
font-family: Arial;
}
#Paylas #PaylasYazi #PaylasButon {
width: 0px;
height: 34px;
line-height: 34px;
float: left;
overflow: hidden;
-moz-transition: width 0.5s;
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
#Paylas #PaylasYazi:hover #PaylasButon {
width: 117px;
}
#Paylas #PaylasYazi #PaylasButon a {
height: 34px;
float: left;
display: block;
overflow: hidden;
width: 0px;
-moz-transition: width 0.5s margin-right 0.5s;
-webkit-transition: width 0.5s margin-right 0.5s;
transition: width 0.5s, margin-right 0.5s;
margin-right: 0px;
text-align: center;
color: #ffffff;
text-decoration: none;
line-height: 34px !important;
height: 34px;
}
#Paylas #PaylasYazi #PaylasButon a.fb {
background-color: #3b5998;
}
#Paylas #PaylasYazi #PaylasButon a.twt {
background-color: #55acee;
}
#Paylas #PaylasYazi #PaylasButon a.ggl {
background-color: #dd4b39;
}
#Paylas #PaylasYazi #PaylasButon a img {
-moz-transition: width 0.5s;
-webkit-transition: width 0.5s;
transition: width 0.5s;
width: 0px;
height: auto;
}
#Paylas #PaylasYazi:hover #PaylasButon a {
width: 34px;
margin-right: 5px;
}
#Paylas #PaylasYazi:hover #PaylasButon a img {
width: 34px;
}
</style>
</head><body>
<div id="Paylas">
<div id="PaylasYazi">
<div id="PaylasButon">
<a class="fb" href="#" title="ÖĞRETMEN GİRİŞİ">f</a>
<a class="twt" href="#" title="ÖĞRETMEN GİRİŞİ">t</a>
<a class="ggl" href="#" title="ÖĞRETMEN GİRİŞİ">g</a>
</div>
<!-- #PaylasButon -->
Paylaş
</div>
<!-- #PaylasYazi -->
</div>
<!-- #Paylas -->
</body>