25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.

8 yıl önce
8 yıl önce
8 yıl önce
8 yıl önce
7 yıl önce
8 yıl önce
8 yıl önce
8 yıl önce
8 yıl önce
8 yıl önce
12 yıl önce
9 yıl önce
8 yıl önce
8 yıl önce
12 yıl önce
8 yıl önce
8 yıl önce
8 yıl önce
8 yıl önce
8 yıl önce
7 yıl önce
12 yıl önce
9 yıl önce
8 yıl önce
8 yıl önce
8 yıl önce
8 yıl önce
8 yıl önce
12 yıl önce
8 yıl önce
8 yıl önce
8 yıl önce
8 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Zocial CSS3 Buttons</title>
  6. <link rel="stylesheet" type="text/css" href="css/zocial.css" />
  7. <link href='http://fonts.googleapis.com/css?family=Pompiere' rel='stylesheet' type='text/css'>
  8. <style>
  9. html {
  10. background: #f0f0eb;
  11. font-family: "Helvetica Neue", sans-serif;
  12. }
  13. h2, p {
  14. font-family: "Pompiere","Helvetica Neue", sans-serif;
  15. }
  16. body {
  17. background: #FFF;
  18. -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
  19. -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
  20. box-shadow: 0 1px 1px rgba(0,0,0,0.5);
  21. -webkit-border-radius: 0 0 2px 2px;
  22. -moz-border-radius: 0 0 2px 2px;
  23. border-radius: 0 0 2px 2px;
  24. margin: 0 auto 2em;
  25. padding: 2em 1em;
  26. width: 600px;
  27. }
  28. body .zocial {
  29. margin: 8px 4px;
  30. font-size: 13px;
  31. }
  32. h2 {
  33. font-size: 17px;
  34. font-weight: normal;
  35. padding: 1em 0 0.75em;
  36. border-bottom: 1px solid #eee;
  37. }
  38. </style>
  39. <!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  40. </head>
  41. <body>
  42. <h2 id="popular-kids">The Popular Kids</h2>
  43. <a href="#" class="zocial facebook">Sign in with Facebook</a>
  44. <a href="#" class="zocial googleplus">Sign in with Google+</a>
  45. <a href="#" class="zocial twitter">Sign in with Twitter</a>
  46. <a href="#" class="zocial linkedin">Sign in with LinkedIn</a>
  47. <h2 id="cool-kids">The Cool Kids</h2>
  48. <a href="#" class="zocial dropbox">Sync with Dropbox</a>
  49. <a href="#" class="zocial evernote">Clip to Evernote</a>
  50. <a href="#" class="zocial forrst">Follow me on Forrst</a>
  51. <a href="#" class="zocial dribbble">Sign in with Dribbble</a>
  52. <a href="#" class="zocial cloudapp">Sign in to CloudApp</a>
  53. <a href="#" class="zocial github">Fork me on Github</a>
  54. <a href="#" class="zocial gitlab">Fork me on GitLab</a>
  55. <a href="#" class="zocial spotify">Play on Spotify</a>
  56. <a href="#" class="zocial instapaper">Read It Later</a>
  57. <a href="#" class="zocial soundcloud">Follow me on Soundcloud</a>
  58. <a href="#" class="zocial tumblr">Follow me on Tumblr</a>
  59. <a href="#" class="zocial smashing">Read on Smashing Magazine</a>
  60. <a href="#" class="zocial itunes">Available on iTunes</a>
  61. <a href="#" class="zocial appstore">Available on the App Store</a>
  62. <a href="#" class="zocial macstore">Available on the Mac App Store</a>
  63. <a href="#" class="zocial android">Available on Android Market</a>
  64. <a href="#" class="zocial pinterest">Follow me on Pinterest</a>
  65. <a href="#" class="zocial quora">Follow me on Quora</a>
  66. <a href="#" class="zocial lanyrd">Attend on Lanyrd</a>
  67. <a href="#" class="zocial twitch">Sign in with Twitch</a>
  68. <a href="#" class="zocial houzz">Sign in with Houzz</a>
  69. <a href="#" class="zocial slack">Sign in with Slack</a>
  70. <a href="#" class="zocial pandora">Sign in with Pandora</a>
  71. <h2 id="not-so-cool-kids">The Not-So-Cool But Have-To-Be-Invited Kids</h2>
  72. <a href="#" class="zocial paypal">Pay with Paypal</a>
  73. <a href="#" class="zocial amazon">Sign in with Amazon</a>
  74. <a href="#" class="zocial skype">Call me on Skype</a>
  75. <a href="#" class="zocial lastfm">Sign in with Last.fm</a>
  76. <a href="#" class="zocial yelp">Write a review on Yelp</a>
  77. <a href="#" class="zocial foursquare">Check in with foursquare</a>
  78. <a href="#" class="zocial klout">Influence with Klout</a>
  79. <h2 id="older-kids">The Older (but Solid) Kids</h2>
  80. <a href="#" class="zocial wikipedia">View on Wikipedia</a>
  81. <a href="#" class="zocial disqus">Sign in with Disqus</a>
  82. <a href="#" class="zocial intensedebate">Sign in with IntenseDebate</a>
  83. <a href="#" class="zocial google">Sign in with Google</a>
  84. <a href="#" class="zocial gmail">Sign in with Gmail</a>
  85. <a href="#" class="zocial vimeo">Upload to Vimeo</a>
  86. <a href="#" class="zocial scribd">Read more on Scribd</a>
  87. <a href="#" class="zocial youtube">Subscribe on YouTube</a>
  88. <a href="#" class="zocial wordpress">Sign in with WordPress</a>
  89. <a href="#" class="zocial songkick">Sign in with Songkick</a>
  90. <a href="#" class="zocial posterous">Sign in with Posterous</a>
  91. <a href="#" class="zocial eventbrite">Sign in with Eventbrite</a>
  92. <a href="#" class="zocial flattr">Tip with Flattr</a>
  93. <a href="#" class="zocial plancast">Follow me on Plancast</a>
  94. <h2 id="smelly-kids">The Kids That Kinda Smell but Some People Don't Mind</h2>
  95. <a href="#" class="zocial yahoo">Submit resume for CEO</a>
  96. <a href="#" class="zocial ie">Download Internet Explorer 5</a>
  97. <a href="#" class="zocial meetup">Report bugs with Meetup.com</a>
  98. <a href="#" class="zocial openid">Learn how-to-use OpenID</a>
  99. <a href="#" class="zocial html5">Register now for HTML6</a>
  100. <a href="#" class="zocial aol">Chat with your parents</a>
  101. <h2 id="quiet-kids">The Kids That Nobody Normally Notices</h2>
  102. <a href="#" class="zocial guest">Sign in as guest</a>
  103. <a href="#" class="zocial creativecommons">View Creative Commons Licence</a>
  104. <a href="#" class="zocial rss">Subscribe to RSS</a>
  105. <a href="#" class="zocial chrome">Add to Chrome</a>
  106. <h2>The He's-My-Son-So-Of-Course-He's-Here Kid</h2>
  107. <a href="#" class="zocial eventasaurus">Sign up for Eventasaurus</a>
  108. <h2 id="kids-by-request">Kids By Request</h2>
  109. <a href="#" class="zocial weibo">Join me on Weibo</a>
  110. <a href="#" class="zocial plurk">Sign in with Plurk</a>
  111. <a href="#" class="zocial grooveshark">Play on Grooveshark</a>
  112. <a href="#" class="zocial blogger">Post on Blogger</a>
  113. <a href="#" class="zocial viadeo">Sign in with Viadeo</a>
  114. <a href="#" class="zocial podcast">Subscribe to this Podcast</a>
  115. <a href="#" class="zocial fivehundredpx">View Portfolio on 500px</a>
  116. <a href="#" class="zocial bitcoin">Bitcoin accepted here</a>
  117. <a href="#" class="zocial ninetyninedesigns">View Portfolio on 99Designs</a>
  118. <a href="#" class="zocial pinboard">Bookmark with Pinboard</a>
  119. <a href="#" class="zocial stumbleupon">Stumble!</a>
  120. <a href="#" class="zocial myspace">Find me on Myspace</a>
  121. <a href="#" class="zocial windows">Sign in with Windows Live</a>
  122. <a href="#" class="zocial eventful">Find Events with Eventful</a>
  123. <a href="#" class="zocial xing">Sign in with Xing</a>
  124. <a href="#" class="zocial flickr">Upload to Flickr</a>
  125. <a href="#" class="zocial delicious">Sign in with Del.icio.us</a>
  126. <a href="#" class="zocial googleplay">Download from Google Play</a>
  127. <a href="#" class="zocial opentable">Reserve with OpenTable</a>
  128. <a href="#" class="zocial digg">Digg this</a>
  129. <a href="#" class="zocial reddit">Share on Reddit</a>
  130. <a href="#" class="zocial angellist">Fund us on AngelList</a>
  131. <a href="#" class="zocial instagram">Sign in with Instagram</a>
  132. <a href="#" class="zocial steam">Sign in with Steam</a>
  133. <a href="#" class="zocial vk">Sign in with VKontakte</a>
  134. <a href="#" class="zocial appnet">Sign in with App.net</a>
  135. <a href="#" class="zocial drupal">Built with Drupal</a>
  136. <a href="#" class="zocial statusnet">Share with Status.net/Indenti.ca</a>
  137. <a href="#" class="zocial pocket">Save for later</a>
  138. <a href="#" class="zocial acrobat">Download Adobe Acrobat</a>
  139. <a href="#" class="zocial bitbucket">Fork from Bitbucket</a>
  140. <a href="#" class="zocial buffer">Buffer</a>
  141. <a href="#" class="zocial lego">Make me out of Lego</a>
  142. <a href="#" class="zocial logmein">Log in</a>
  143. <a href="#" class="zocial ycombinator">Hacker News</a>
  144. <a href="#" class="zocial stackoverflow">Sign in with Stackoverflow</a>
  145. <a href="#" class="zocial lkdto">Lkd.to</a>
  146. <a href="#" class="zocial persona">Sign in with Persona</a>
  147. <a href="#" class="zocial messenger">Start chat on Messenger</a>
  148. <h2 id="multipurpose-kids">The Multi-Purpose Kids (Credit: <a href="http://pictos.drewwilson.com">Pictos Icons</a>)</h2>
  149. <a href="#" class="zocial call">Call a phone</a>
  150. <a href="#" class="zocial email">Send a message</a>
  151. <a href="#" class="zocial cal">Add to calendar</a>
  152. <a href="#" class="zocial cart">Add to cart</a>
  153. <a href="#" class="zocial print">Print this page</a>
  154. <a href="#" class="zocial primary" title="A primary button for general purposes to keep consistency with Zocial">Primary action</a>
  155. <a href="#" class="zocial secondary" title="A secondary button for general purposes to keep consistency with Zocial">Secondary action</a>
  156. <h2 id="new-kids">The Kids by Pull Request (Credit: <a href="http://bernardi.me">Stefano Bernardi</a> and <a href="http://heuzef.com">Heuzef</a>)</h2>
  157. <a href="#" class="zocial stripe">Sign in with Stripe</a>
  158. <a href="#" class="zocial dwolla">Sign in with Dwolla</a>
  159. <a href="#" class="zocial joinme">Sign in with join.me</a>
  160. <a href="#" class="zocial betaseries">Voir mon profil BetaSeries</a>
  161. <a href="#" class="zocial deviantart">Follow me on DeviantArt</a>
  162. <a href="#" class="zocial www">https://www.w3.org</a>
  163. <a href="#" class="zocial askfm">Follow me on ASKfm</a>
  164. <a href="#" class="zocial discordapp">Call me on Discord</a>
  165. <h2 id="icons">Icon versions of the above</h2>
  166. <a href="#" class="zocial icon facebook">Sign in with Facebook</a>
  167. <a href="#" class="zocial icon googleplus">Sign in with Google+</a>
  168. <a href="#" class="zocial icon twitter">Sign in with Twitter</a>
  169. <a href="#" class="zocial icon google">Sign in with Google</a>
  170. <a href="#" class="zocial icon linkedin">Sign in with LinkedIn</a>
  171. <a href="#" class="zocial icon paypal">Pay with Paypal</a>
  172. <a href="#" class="zocial icon amazon">Sign in with Amazon</a>
  173. <a href="#" class="zocial icon dropbox">Sync with Dropbox</a>
  174. <a href="#" class="zocial icon evernote">Clip to Evernote</a>
  175. <a href="#" class="zocial icon skype">Call me on Skype</a>
  176. <a href="#" class="zocial icon guest">Sign in as guest</a>
  177. <a href="#" class="zocial icon spotify">Play on Spotify</a>
  178. <a href="#" class="zocial icon lastfm">Sign in with Last.fm</a>
  179. <a href="#" class="zocial icon songkick">Sign in with Songkick</a>
  180. <a href="#" class="zocial icon forrst">Follow me on Forrst</a>
  181. <a href="#" class="zocial icon dribbble">Sign in with Dribbble</a>
  182. <a href="#" class="zocial icon cloudapp">Sign in to CloudApp</a>
  183. <a href="#" class="zocial icon github">Fork me on Github</a>
  184. <a href="#" class="zocial icon gitlab">Fork me on GitLab</a>
  185. <a href="#" class="zocial pinterest icon">Follow me on Pinterest</a>
  186. <a href="#" class="zocial quora icon">Follow me on Quora</a>
  187. <a href="#" class="zocial pinboard icon">Bookmark with Pinboard</a>
  188. <a href="#" class="zocial lanyrd icon">Attend on Lanyrd</a>
  189. <a href="#" class="zocial icon itunes">Download on iTunes</a>
  190. <a href="#" class="zocial icon android">Download on Android</a>
  191. <a href="#" class="zocial icon disqus">Sign in with Disqus</a>
  192. <a href="#" class="zocial icon yahoo">Sign in with Yahoo</a>
  193. <a href="#" class="zocial icon vimeo">Upload to Vimeo</a>
  194. <a href="#" class="zocial icon chrome">Add to Chrome</a>
  195. <a href="#" class="zocial icon ie">Get a new browser</a>
  196. <a href="#" class="zocial icon html5">Made from HTML5</a>
  197. <a href="#" class="zocial icon instapaper">Read It Later</a>
  198. <a href="#" class="zocial icon scribd">Read more on Scribd</a>
  199. <a href="#" class="zocial icon wikipedia">View on Wikipedia</a>
  200. <a href="#" class="zocial icon flattr">Tip with Flattr</a>
  201. <a href="#" class="zocial icon tumblr">Follow me on Tumblr</a>
  202. <a href="#" class="zocial icon posterous">Subscribe to my Posterous</a>
  203. <a href="#" class="zocial icon gowalla">Check in with Gowalla</a>
  204. <a href="#" class="zocial icon foursquare">Check in with foursquare</a>
  205. <a href="#" class="zocial icon yelp">Write a review on Yelp</a>
  206. <a href="#" class="zocial icon soundcloud">Follow me on Soundcloud</a>
  207. <a href="#" class="zocial icon smashing">Read on Smashing Magazine</a>
  208. <a href="#" class="zocial icon wordpress">Sign in with WordPress</a>
  209. <a href="#" class="zocial icon intensedebate">Sign in with IntenseDebate</a>
  210. <a href="#" class="zocial icon openid">Sign in with OpenID</a>
  211. <a href="#" class="zocial icon gmail">Sign in with Gmail</a>
  212. <a href="#" class="zocial icon eventbrite">Sign in with Eventbrite</a>
  213. <a href="#" class="zocial icon eventasaurus">Sign in with Eventasaurus</a>
  214. <a href="#" class="zocial icon meetup">Sign in with Meetup.com</a>
  215. <a href="#" class="zocial icon aol">Sign in with AIM</a>
  216. <a href="#" class="zocial icon plancast">Follow me on Plancast</a>
  217. <a href="#" class="zocial icon youtube">Subscribe on YouTube</a>
  218. <a href="#" class="zocial icon appstore">Available on the Mac App Store</a>
  219. <a href="#" class="zocial icon creativecommons">View Creative Commons Licence</a>
  220. <a href="#" class="zocial icon rss">Subscribe to RSS</a>
  221. <a href="#" class="zocial weibo icon">Follow me on Weibo</a>
  222. <a href="#" class="zocial plurk icon">Follow me on Plurk</a>
  223. <a href="#" class="zocial grooveshark icon">Follow me on Grooveshark</a>
  224. <a href="#" class="zocial blogger icon">Post on Blogger</a>
  225. <a href="#" class="zocial viadeo icon">Sign in with Viadeo</a>
  226. <a href="#" class="zocial podcast icon">Subscribe to this Podcast</a>
  227. <a href="#" class="zocial fivehundredpx icon">View Portfolio on 500px</a>
  228. <a href="#" class="zocial bitcoin icon">Bitcoin accepted here</a>
  229. <a href="#" class="zocial ninetyninedesigns icon">View Portfolio on 99Designs</a>
  230. <a href="#" class="zocial stumbleupon icon">Stumble!</a>
  231. <a href="#" class="zocial itunes icon">Download on iTunes</a>
  232. <a href="#" class="zocial myspace icon">Find me on Myspace</a>
  233. <a href="#" class="zocial windows icon">Sign in with Windows Live</a>
  234. <a href="#" class="zocial eventful icon">Find Events with Eventful</a>
  235. <a href="#" class="zocial klout icon">Influence with Klout</a>
  236. <a href="#" class="zocial xing icon">Sign in with Xing</a>
  237. <a href="#" class="zocial flickr icon">Upload to Flickr</a>
  238. <a href="#" class="zocial delicious icon">Sign in with Del.icio.us</a>
  239. <a href="#" class="zocial googleplay icon">Download from Google Play</a>
  240. <a href="#" class="zocial opentable icon">Reserve with OpenTable</a>
  241. <a href="#" class="zocial digg icon">Digg this</a>
  242. <a href="#" class="zocial reddit icon">Share on Reddit</a>
  243. <a href="#" class="zocial angellist icon">Fund us on AngelList</a>
  244. <a href="#" class="zocial instagram icon">Sign in with Instagram</a>
  245. <a href="#" class="zocial steam icon">Sign in with Steam</a>
  246. <a href="#" class="zocial vk icon">Sign in with VKontakte</a>
  247. <a href="#" class="zocial appnet icon">Sign in with App.net</a>
  248. <a href="#" class="zocial stripe icon">Sign in with Stripe</a>
  249. <a href="#" class="zocial dwolla icon">Sign in with Dwolla</a>
  250. <a href="#" class="zocial drupal icon">Built with Drupal</a>
  251. <a href="#" class="zocial statusnet icon">Share with Status.net/Indenti.ca</a>
  252. <a href="#" class="zocial pocket icon">Save for later</a>
  253. <a href="#" class="zocial acrobat icon">Download Adobe Acrobat</a>
  254. <a href="#" class="zocial bitbucket icon">Fork from Bitbucket</a>
  255. <a href="#" class="zocial buffer icon">Buffer</a>
  256. <a href="#" class="zocial lego icon">Make me out of Lego</a>
  257. <a href="#" class="zocial logmein icon">Log in</a>
  258. <a href="#" class="zocial ycombinator icon">Hacker News</a>
  259. <a href="#" class="zocial stackoverflow icon">Sign in with Stackoverflow</a>
  260. <a href="#" class="zocial lkdto icon">Lkd.to</a>
  261. <a href="#" class="zocial persona icon">Sign in with Persona</a>
  262. <a href="#" class="zocial joinme icon">Sign in with join.me</a>
  263. <a href="#" class="zocial twitch icon">Sign in with Twitch</a>
  264. <a href="#" class="zocial houzz icon">Sign in with Houzz</a>
  265. <a href="#" class="zocial slack icon">Sign in with Slack</a>
  266. <a href="#" class="zocial pandora icon">Sign in with Pandora</a>
  267. <a href="#" class="zocial betaseries icon">Voir mon profil BetaSeries</a>
  268. <a href="#" class="zocial deviantart icon">Follow me on DeviantArt</a>
  269. <a href="#" class="zocial www icon">https://www.w3.org/</a>
  270. <a href="#" class="zocial askfm icon">Follow me on ASKfm</a>
  271. <a href="#" class="zocial discordapp icon">Call me on Discord</a>
  272. <br />
  273. <a href="#" class="zocial call icon">Call a phone</a>
  274. <a href="#" class="zocial email icon">Send a message</a>
  275. <a href="#" class="zocial cal icon">Add to calendar</a>
  276. <a href="#" class="zocial print icon">Print this page</a>
  277. <a href="#" class="zocial cart icon">Add to cart</a>
  278. <p>Thanks to <a href="http://twitter.com/guillermovs" target="_blank">@guillermovs</a>, <a href="http://twitter.com/kamens" target="_blank">@kamens</a>, <a href="http://twitter.com/vizualover" target="_blank">@vizualover</a>, and <a href="http://twitter.com/leaverou" target="_blank">@leaverou</a> for code refinements and suggestions.</p>
  279. <p>Massive thanks to <a href="http://twitter.com/drewwilson" target="_blank">@drewwilson</a> for making the multi-purpose buttons possible with his incredible <a href="http://pictos.drewwilson.com">Pictos icons</a>.</p>
  280. <p>See code samples at <a href="http://zocial.smcllns.com">zocial.smcllns.com</a> &mdash; ask questions to <a href="http://twitter.com/smcllns">@smcllns</a></p>
  281. <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://zocial.smcllns.com" data-via="smcllns">Tweet</a>
  282. <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  283. <script type="text/javascript">
  284. var _gaq = _gaq || [];
  285. _gaq.push(['_setAccount', 'UA-25061452-1']);
  286. _gaq.push(['_setDomainName', 'smcllns.com']);
  287. _gaq.push(['_setAllowHash', 'false']);
  288. _gaq.push(['_trackPageview']);
  289. _gaq.push(['_trackPageLoadTime']);
  290. (function() {
  291. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  292. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  293. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  294. })();
  295. </script>
  296. </body>
  297. </html>