Hareketli Sosyal Medya Butonu

Hareketli Sosyal Medya Butonu

         

          Tasarımın Görüntüsü

Editörden  Notlar: Tasarım gayet güzel ve sade ayrıca üzerine gittiğimiz butonun hareketlenmesi ve sosyal medya ikonun kendi rengini alması gayet göze hitap eder olmuş.Bunun gibi butonlar sayesinde takipçilerinizle sadece internet sitenizde değil sosyal medyadanda iletişim kurabileceksiniz.


Tasarımın Kodu:
<style> .touchme a { display:block; height:50px; width:50px; padding:0 4px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFR7PnD1yZrNpcsvIMkWqCrgp_RNz5gfOIHxUGUzRsfKm5sdOoWpCXkoSH8-dv9kT-zjDjOP-tcHds4BV4BBKkJvE3czoI2p6kfHdqJ-5nUMiehIcoBj4ASxfCwHocvH8H9gt1lU2eT9la/s1600/garipblogcu.blogspot.com.png) no-repeat; -webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all; -o-transition: ease-in 0.2s all; -ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all; cursor:pointer; } .touchme a.googleplus { background-position: 0px -58px; } .touchme a.googleplus:hover { background-position: 0px 0px; } .touchme a.twitter { background-position: 0px -290px; } .touchme a.twitter:hover { background-position: 0px -232px; } .touchme a.facebook { background-position: 0px -406px; } .touchme a.facebook:hover { background-position: 0px -348px; } .touchme a.rss { background-position: 0px -174px; } .touchme a.rss:hover { background-position: 0px -116px; } </style> <div class='touchme'><!--Facebook--> <a class='facebook' href="http://www.facebook.com/qinqcocuq" rel='external nofollow' target='_blank'></a> <!-- Twitter --> <a class='twitter' href="https://twitter.com/gfb_halildnmz" rel='external nofollow' target='_blank' ></a><!--Google Plus--> <a class='googleplus' href=https://plus.google.com/104786354802437954523/posts?hl=tr" rel='external nofollow' target='_blank'></a> <!--RSS--> <a class='rss' href="http://feeds.feedburner.com/" rel='external nofollow' target='_blank'></a> </div>