Metro Tarz Sosyal Ağ Butonlar
Metro tarzı sosyal ağ paylaşım butonları makalemizle yine beraberiz.
Bu makalemde Windos 8 Metro Arayüzüne benzerliği ile dikkat çeken, Metro style sosyal ağ butonlarını paylaşıcam. Bu güzel eklentiyi sanırım siz de beğeneceksiniz. Dilerseniz kodlara geçelim.
CSS Kod:
#jocial{width: 305px; float: left;margin-top: 10px;} #jocial li{position:relative; cursor:pointer; padding: 0 !important;} #jocial .facebook, .googleplus, .rss, .twitter{ position: relative; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; z-index: 5; display: block; float: left; margin: 1px;} #jocial .icon{overflow:hidden;} #jocial .facebook{width: 150px; height: 150px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTxdJwStPMjjAhJ4XC_9m72eOk_Ba7d97oeZa2n7Po_nCDd3sf9rNN6m5XUWMBj2zCrzi0NEWhR_4x6UoA2472w6lZVqvyH8OxNms3egewoSKNjBdujwUuhxjrWToDp2KMbAskGH6ni_v/s0/facebook.png") no-repeat center center;} #jocial .twitter{width: 150px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKCg60DcN3C0O175bi1s1m9rzH0ddZWFWXwfKZkrxQMFnSAhuy5XitYFgBT8o97IMduKagswFdjrvY0Ge0rjAt6eu5ui7obPm4OjWdb8HOVAGaymhbM3ssmnapZguJkXUc2p0KAKWPUG98/s0/twitter.png") no-repeat center center;} #jocial .googleplus{width: 150px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_BwDiMRrUAbrRd6yZtvKpY5JFHhdL6zJciYjRXZBgyv1unodvKp-K0jLuVzDmH4zPY7qSCMefQrflx-C1EBjHtfIRqnoSMKakwMsI9GleW-h5TdHdXuKg7jj2mZJh5aSOn-ZrEcEslJC/s0/google%25252Bplus.png") no-repeat center center;} #jocial .rss{ width: 302px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT3nhjAyL5IuqBlSSSalooc65eCdBi6KWDrRH19GVeIEseCewTQ3vvo8SlA4HycldgzT_lZLPz91zm3aOSZP3YhW5rRIByMtq1VpFfPhamF-9U5GTvEPsIniBkYnLwW2xfWmFpsSWVacwf/s0/rss.png") no-repeat center center;} #jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #jocial li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKCg60DcN3C0O175bi1s1m9rzH0ddZWFWXwfKZkrxQMFnSAhuy5XitYFgBT8o97IMduKagswFdjrvY0Ge0rjAt6eu5ui7obPm4OjWdb8HOVAGaymhbM3ssmnapZguJkXUc2p0KAKWPUG98/s0/twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #jocial li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_BwDiMRrUAbrRd6yZtvKpY5JFHhdL6zJciYjRXZBgyv1unodvKp-K0jLuVzDmH4zPY7qSCMefQrflx-C1EBjHtfIRqnoSMKakwMsI9GleW-h5TdHdXuKg7jj2mZJh5aSOn-ZrEcEslJC/s0/google%25252Bplus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #jocial li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT3nhjAyL5IuqBlSSSalooc65eCdBi6KWDrRH19GVeIEseCewTQ3vvo8SlA4HycldgzT_lZLPz91zm3aOSZP3YhW5rRIByMtq1VpFfPhamF-9U5GTvEPsIniBkYnLwW2xfWmFpsSWVacwf/s0/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;}
HTML KOD:
<ul id='jocial'> <li><a class='icon facebook' href='http://www.facebook.com/YOUR_USERNAME/'></a></li> <li><a class='icon twitter' href='http://twitter.com/username/'></a></li> <li><a class='icon googleplus' href='https://plus.google.com/u/0/alamat profil google+/'></a></li> <li><a class='icon rss' href='http://feeds.feedburner.com/YOUR_USERNAME'></a></li> </ul>
HTML kodlarındaki your user name leri kendi sosyal ağ isimleri ile değiştirmeyi unutmayın.
Sign up here with your email
Yorumlarınız için teşkür ederim Conversion Conversion Emoticon Emoticon