Hocam çok teşekkür ederim tam istediğim gibi oldu kendi temama görede biraz ayarlamaya çalıştım oldu lakin içerisine koyduğum icolar ortalı değilde kırmızı kare içinde sağa yazlı duruyor. ben bunları ortalayamadım bunu nasıl yapabilirim? birde hepsinin kuutu kırmızı değilde "facebok" lacivert "twitter" açık mavi gibi arkaplan rengide vermek istiyorum
kodlarınızı şöyle yaptım
<style>
#Paylas #PaylasYazi {
float: right;
height: auto;
line-height: 34px;
font-size: 14px;
overflow: hidden;
font-family: Arial;
}
#Paylas #PaylasYazi #PaylasButon {
width: 0px;
height: auto;
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: 167px;
}
#Paylas #PaylasYazi #PaylasButon a {
height: auto;
float: left;
background-color: #cc0000;
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;
}
#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>
<div id="Paylas">
<div id="PaylasYazi">
<div id="PaylasButon">
<a href="#" title="ÖĞRETMEN GİRİŞİ"><i class="fa fa-facebook"></i></a>
<a href="#" title="ÖĞRETMEN GİRİŞİ"><i class="fa fa-twitter"></i></a>
<a href="#" title="ÖĞRETMEN GİRİŞİ"><i class="fa fa-instagram"></i></a>
<a href="#" title="ÖĞRETMEN GİRİŞİ"><i class="fa fa-youtube"></i></a>
</div>
<!-- #PaylasButon -->
<li><a href="#." ><i class="fa fa-share-square-o"></i></a></li>
</div>
<!-- #PaylasYazi -->
</div>
<!-- #Paylas -->
Şimdi yazdım. Umarım işini görür.
Not: 87px ve 24px'i kendi ikon boyutuna göre değiştirmen, matematiksel hesap yapman gerekecektir.
<style>
#Paylas #PaylasYazi {
float: left;
height: 24px;
line-height: 24px;
font-size: 14px;
overflow: hidden;
font-family: Arial;
}
#Paylas #PaylasYazi #PaylasButon {
width: 0px;
height: 24px;
line-height: 24px;
float: left;
overflow: hidden;
-moz-transition: width 0.5s;
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
#Paylas #PaylasYazi:hover #PaylasButon {
width: 87px;
}
#Paylas #PaylasYazi #PaylasButon a {
height: 24px;
float: left;
background-color: #cc0000;
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;
}
#Paylas #PaylasYazi #PaylasButon a img {
-moz-transition: width 0.5s;
-webkit-transition: width 0.5s;
transition: width 0.5s;
width: 0px;
height: 24px;
}
#Paylas #PaylasYazi:hover #PaylasButon a {
width: 24px;
margin-right: 5px;
}
#Paylas #PaylasYazi:hover #PaylasButon a img {
width: 24px;
}
</style>
<div id="Paylas">
<div id="PaylasYazi">
<div id="PaylasButon">
<a href="#"><img src="http://www.baskihizmetleri.net/wp-content/uploads/deneme.jpg" /></a>
<a href="#"><img src="http://www.baskihizmetleri.net/wp-content/uploads/deneme.jpg" /></a>
<a href="#"><img src="http://www.baskihizmetleri.net/wp-content/uploads/deneme.jpg" /></a>
</div>
<!-- #PaylasButon -->
Paylaş
</div>
<!-- #PaylasYazi -->
</div>
<!-- #Paylas -->