lostyazilim
tr.link

CSS İle Sosyal Medya Butonu Oluşturma

4 Mesajlar 1.580 Okunma
acebozum
tr.link

temapazaricom temapazaricom WordPress Tema Kullanıcı
  • Üyelik 24.01.2013
  • Yaş/Cinsiyet 30 / E
  • Meslek Web Developer
  • Konum İzmir
  • Ad Soyad B** Ş**
  • Mesajlar 134
  • Beğeniler 22 / 29
  • Ticaret 2, (%100)
Aşağıda paylaşmış olduğum butonları css sprite ile yaptım sitenin kasmaması açısından.

HTML Yapısı:


CSS Yapısı:
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400, 300);
#sosyal-medya {
font-family:'Roboto Condensed', sans-serif;
}
#sosyal-medya ul {
margin-left: -40px;
}
#sosyal-medya ul a {
color: #fff;
text-decoration: none;
}
#sosyal-medya ul a li {
float: left;
list-style: none;
height: 58px;
width: 68px;
margin: 3px 3px 0 0;
text-align: center;
font-size: 12px;
background: #2c2c2c;
display: block;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
padding: 9px 0 0 0;
}
#sosyal-medya ul a li div {
background-image: url(http://buraksah.in/wp-content/uploads/2013/02/sprite-sosyal1.png);
margin:5px 0 0 26px;
height: 15px;
width: 15px;
}
li#fb:hover {
background: #38589f
}
li#tw:hover {
background: #44b0e3
}
li#pin:hover {
background: #cb2229
}
li#gplus:hover {
background: #cd4132
}
li#ins:hover {
background: #d2c3ac
}
li#flickr:hover {
background: #ff0085
}
li#in:hover {
background: #64b7d2
}
li#rss:hover {
background: #f8bc2d
}
li#fb div {
background-position: 0 0;
}
li#tw div {
background-position: 0 -16px;
}
li#pin div {
background-position: 0 -117px;
}
li#gplus div {
background-position: 0 -99px;
}
li#ins div {
background-position: 0 -64px;
}
li#flickr div {
background-position: 0 -84px;
}
li#in div {
background-position: 0 -49px;
}
li#rss div {
background-position: 0 -32px;
}


Sonuç:



Ön izleme: http://jsfiddle.net/bsahin/Cq2Sm/light/
Kaynak: http://buraksah.in/css-ile-sosyal-medya-butonu-olusturma.html
 

 

Profesyonel WordPress Temaları - temapazari.com

elektronikssl
webimgo

MehmetAliATLI MehmetAliATLI WM Aracı Kullanıcı
  • Üyelik 13.04.2011
  • Yaş/Cinsiyet 39 / E
  • Meslek Muhasebe
  • Konum Antalya
  • Ad Soyad M** A**
  • Mesajlar 759
  • Beğeniler 161 / 84
  • Ticaret 9, (%100)
Gayet başarılı olmuş elinize sağlık.
 

 

🔒 http://mcmyazilim.com

barisay barisay WM Aracı Kullanıcı
  • Üyelik 14.02.2013
  • Yaş/Cinsiyet 34 / E
  • Meslek Seo, Wordpress, Security
  • Konum Konya
  • Ad Soyad B** A**
  • Mesajlar 1386
  • Beğeniler 146 / 428
  • Ticaret 65, (%100)
burdakini inceleyip extra şeyler ekleye bilirmisin.
 

 

skype: baris.ay.

temapazaricom temapazaricom WordPress Tema Kullanıcı
  • Üyelik 24.01.2013
  • Yaş/Cinsiyet 30 / E
  • Meslek Web Developer
  • Konum İzmir
  • Ad Soyad B** Ş**
  • Mesajlar 134
  • Beğeniler 22 / 29
  • Ticaret 2, (%100)

sonses10 adlı üyeden alıntı

Gayet başarılı olmuş elinize sağlık.


teşekkür ederim yorumun iicin

barisay adlı üyeden alıntı

burdakini inceleyip extra şeyler ekleye bilirmisin.


inceliyorumm..
 

 

Profesyonel WordPress Temaları - temapazari.com

wmaraci
wmaraci
wmaraci
wmaraci
Konuyu toplam 2 kişi okuyor. (0 kullanıcı ve 2 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al