https://instagram.com/alphazzers
   
Konuyu Oyla:
  • Toplam: 3 Oy - Ortalama: 5
  • 1
  • 2
  • 3
  • 4
  • 5
Sosyal Ağlar Çalışması CSS Html
#1
Demo: http://codepen.io/anon/pen/qNQABL

Ufak bir çalışmadır. Her yere tam oturmaz. Ona göre temanıza yerleştirin. Geniş bir alana koyun. Butonların üzerine geldiğinizde ve üzerine bastığınızda efektler vardır. Umarım işinize yarar.
CSS:
Kod:
#sosyal ul {
 padding: 0px;
 margin: 0px;
}
#sosyal ul li {
   background: url(http://i.hizliresim.com/J3raGB.png);
 display: inline-block;
 width: 117px;
 height: 17px;
 padding: 3px 0px 3px 35px;
 font-family: Tahoma;
 font-size: 13px;
 line-height: 18px;
 text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
}
#sosyal ul li.facebook {
 background-position: -154px 0px !important;
}
#sosyal ul li.twitter {
 background-position: -462px 0px !important;
}
#sosyal ul li.gplus {
 background-position: 0px 0px !important;
}
#sosyal ul li.linkedin {
 background-position: -616px 0px !important;
}
#sosyal ul li.facebook:hover {
 background-position: -154px -26px !important;
}
#sosyal ul li.twitter:hover {
 background-position: -462px -26px !important;
}
#sosyal ul li.gplus:hover {
 background-position: 0px -26px !important;
}
#sosyal ul li.linkedin:hover {
 background-position: -616px -26px !important;
}
#sosyal ul li.facebook:active {
 background-position: -154px -52px !important;
}
#sosyal ul li.twitter:active {
 background-position: -462px -52px !important;
}
#sosyal ul li.gplus:active {
 background-position: 0px -52px !important;
}
#sosyal ul li.linkedin:active {
 background-position: -616px -52px !important;
}
#sosyal ul li a {
 color: #fff;
 text-decoration: none;
}

HTML:
Kod:
<div id="sosyal">
<ul>
<li class="facebook"><a href="#">Facebook'da biz!</a></li>
<li class="twitter"><a href="#">Twitter'da biz!</a></li>
<li class="gplus"><a href="#">Google'da biz!</a></li>
<li class="linkedin"><a href="#">LinkedIn'da biz!</a></li>
</ul>
</div>
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi


Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping