Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

228 lignes
13 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Zocial CSS3 Buttons</title>
  5. <link rel="stylesheet" type="text/css" href="css/zocial.css" />
  6. <link href='http://fonts.googleapis.com/css?family=Pompiere' rel='stylesheet' type='text/css'>
  7. <style>
  8. html {
  9. background: #f0f0eb;
  10. font-family: "Helvetica Neue", sans-serif;
  11. }
  12. h2, p {
  13. font-family: "Pompiere","Helvetica Neue", sans-serif;
  14. }
  15. body {
  16. background: #FFF;
  17. -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
  18. -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
  19. box-shadow: 0 1px 1px rgba(0,0,0,0.5);
  20. -webkit-border-radius: 0 0 2px 2px;
  21. -moz-border-radius: 0 0 2px 2px;
  22. border-radius: 0 0 2px 2px;
  23. margin: 0 auto 2em;
  24. padding: 2em 1em;
  25. width: 600px;
  26. }
  27. body .zocial {
  28. margin: 8px 4px;
  29. font-size: 16px;
  30. }
  31. h2 {
  32. font-size: 17px;
  33. font-weight: normal;
  34. padding: 1em 0 0.75em;
  35. border-bottom: 1px solid #eee;
  36. }
  37. </style>
  38. <!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  39. </head>
  40. <body>
  41. <h2>The Popular Kids</h2>
  42. <a href="#" class="zocial facebook"><span>Sign in with Facebook</span></a>
  43. <a href="#" class="zocial googleplus"><span>Sign in with Google+</span></a>
  44. <a href="#" class="zocial twitter"><span>Sign in with Twitter</span></a>
  45. <a href="#" class="zocial linkedin"><span>Sign in with LinkedIn</span></a>
  46. <h2>The Cool Kids</h2>
  47. <a href="#" class="zocial dropbox"><span>Sync with Dropbox</span></a>
  48. <a href="#" class="zocial evernote"><span>Clip to Evernote</span></a>
  49. <a href="#" class="zocial forrst"><span>Follow me on Forrst</span></a>
  50. <a href="#" class="zocial dribbble"><span>Sign in with Dribbble</span></a>
  51. <a href="#" class="zocial cloudapp"><span>Sign in to CloudApp</span></a>
  52. <a href="#" class="zocial github"><span>Fork me on Github</span></a>
  53. <a href="#" class="zocial spotify"><span>Play on Spotify</span></a>
  54. <a href="#" class="zocial instapaper"><span>Read It Later</span></a>
  55. <a href="#" class="zocial soundcloud"><span>Follow me on Soundcloud</span></a>
  56. <a href="#" class="zocial tumblr"><span>Follow me on Tumblr</span></a>
  57. <a href="#" class="zocial smashing"><span>Read on Smashing Magazine</span></a>
  58. <a href="#" class="zocial itunes"><span>Available on iTunes</span></a>
  59. <a href="#" class="zocial appstore"><span>Available on the App Store</span></a>
  60. <a href="#" class="zocial macstore"><span>Available on the Mac App Store</span></a>
  61. <a href="#" class="zocial android"><span>Available on Android Market</span></a>
  62. <h2>The Not-So-Cool But Have-To-Be-Invited Kids</h2>
  63. <a href="#" class="zocial paypal"><span>Pay with Paypal</span></a>
  64. <a href="#" class="zocial amazon"><span>Sign in with Amazon</span></a>
  65. <a href="#" class="zocial skype"><span>Call me on Skype</span></a>
  66. <a href="#" class="zocial lastfm"><span>Sign in with Last.fm</span></a>
  67. <a href="#" class="zocial yelp"><span>Write a review on Yelp</span></a>
  68. <a href="#" class="zocial foursquare"><span>Check in with foursquare</span></a>
  69. <h2>The Older (but Solid) Kids</h2>
  70. <a href="#" class="zocial wikipedia"><span>View on Wikipedia</span></a>
  71. <a href="#" class="zocial disqus"><span>Sign in with Disqus</span></a>
  72. <a href="#" class="zocial intensedebate"><span>Sign in with IntenseDebate</span></a>
  73. <a href="#" class="zocial google"><span>Sign in with Google</span></a>
  74. <a href="#" class="zocial gmail"><span>Sign in with Gmail</span></a>
  75. <a href="#" class="zocial vimeo"><span>Upload to Vimeo</span></a>
  76. <a href="#" class="zocial scribd"><span>Read more on Scribd</span></a>
  77. <a href="#" class="zocial youtube"><span>Subscribe on YouTube</span></a>
  78. <a href="#" class="zocial wordpress"><span>Sign in with WordPress</span></a>
  79. <a href="#" class="zocial songkick"><span>Sign in with Songkick</span></a>
  80. <a href="#" class="zocial posterous"><span>Sign in with Posterous</span></a>
  81. <a href="#" class="zocial eventbrite"><span>Sign in with Eventbrite</span></a>
  82. <a href="#" class="zocial flattr"><span>Tip with Flattr</span></a>
  83. <a href="#" class="zocial plancast"><span>Follow me on Plancast</span></a>
  84. <h2>The Kids That Kinda Smell but Some People Don't Mind</h2>
  85. <a href="#" class="zocial yahoo"><span>Submit resume for CEO</span></a>
  86. <a href="#" class="zocial ie"><span>Download Internet Explorer 5</span></a>
  87. <a href="#" class="zocial meetup"><span>Report bugs with Meetup.com</span></a>
  88. <a href="#" class="zocial openid"><span>Learn how-to-use OpenID</span></a>
  89. <a href="#" class="zocial html5"><span>Register now for HTML6</span></a>
  90. <a href="#" class="zocial aol"><span>Chat with your parents</span></a>
  91. <h2>The Kids That Nobody Normally Notices</h2>
  92. <a href="#" class="zocial guest"><span>Sign in as guest</span></a>
  93. <a href="#" class="zocial creativecommons"><span>View Creative Commons Licence</span></a>
  94. <a href="#" class="zocial rss"><span>Subscribe to RSS</span></a>
  95. <a href="#" class="zocial chrome"><span>Add to Chrome</span></a>
  96. <h2>The He's-My-Son-So-Of-Course-He's-Here Kid</h2>
  97. <a href="#" class="zocial eventasaurus"><span>Sign up for Eventasaurus</span></a>
  98. <h2>Kids By Request</h2>
  99. <a href="#" class="zocial weibo"><span>Join me on Weibo</span></a>
  100. <a href="#" class="zocial plurk"><span>Sign in with Plurk</span></a>
  101. <a href="#" class="zocial grooveshark"><span>Play on Grooveshark</span></a>
  102. <a href="#" class="zocial blogger"><span>Post on Blogger</span></a>
  103. <a href="#" class="zocial viadeo"><span>Sign in with Viadeo</span></a>
  104. <a href="#" class="zocial pinterest"><span>Follow me on Pinterest</span></a>
  105. <a href="#" class="zocial podcast"><span>Subscribe to this Podcast</span></a>
  106. <a href="#" class="zocial fivehundredpx"><span>View Portfolio on 500px</span></a>
  107. <a href="#" class="zocial bitcoin"><span>Bitcoin accepted here</span></a>
  108. <a href="#" class="zocial ninetyninedesigns"><span>View Portfolio on 99Designs</span></a>
  109. <a href="#" class="zocial quora"><span>Follow me on Quora</span></a>
  110. <a href="#" class="zocial pinboard"><span>Bookmark with Pinboard</span></a>
  111. <a href="#" class="zocial stumbleupon"><span>Stumble!</span></a>
  112. <a href="#" class="zocial myspace"><span>Find me on Myspace</span></a>
  113. <h2>The Multi-Purpose Kids (thanks <a href="http://twitter.com/guillermovs" target="_blank">@guillermovs</a>, <a href="http://twitter.com/kamens" target="_blank">@kamens</a>)</h2>
  114. <a href="#" class="zocial call"><span>Call a phone</span></a>
  115. <a href="#" class="zocial email"><span>Send a message</span></a>
  116. <br />
  117. <a href="#" class="zocial primary" title="A primary button for general purposes to keep consistency with Zocial"><span>Primary action</span></a>
  118. <a href="#" class="zocial secondary" title="A secondary button for general purposes to keep consistency with Zocial"><span>Secondary action</span></a>
  119. <h2>Icon versions of the above</h2>
  120. <a href="#" class="zocial icon facebook"><span>Sign in with Facebook</span></a>
  121. <a href="#" class="zocial icon googleplus"><span>Sign in with Google+</span></a>
  122. <a href="#" class="zocial icon twitter"><span>Sign in with Twitter</span></a>
  123. <a href="#" class="zocial icon google"><span>Sign in with Google</span></a>
  124. <a href="#" class="zocial icon linkedin"><span>Sign in with LinkedIn</span></a>
  125. <a href="#" class="zocial icon paypal"><span>Pay with Paypal</span></a>
  126. <a href="#" class="zocial icon amazon"><span>Sign in with Amazon</span></a>
  127. <a href="#" class="zocial icon dropbox"><span>Sync with Dropbox</span></a>
  128. <a href="#" class="zocial icon evernote"><span>Clip to Evernote</span></a>
  129. <a href="#" class="zocial icon skype"><span>Call me on Skype</span></a>
  130. <a href="#" class="zocial icon guest"><span>Sign in as guest</span></a>
  131. <a href="#" class="zocial icon spotify"><span>Play on Spotify</span></a>
  132. <a href="#" class="zocial icon lastfm"><span>Sign in with Last.fm</span></a>
  133. <a href="#" class="zocial icon songkick"><span>Sign in with Songkick</span></a>
  134. <a href="#" class="zocial icon forrst"><span>Follow me on Forrst</span></a>
  135. <a href="#" class="zocial icon dribbble"><span>Sign in with Dribbble</span></a>
  136. <a href="#" class="zocial icon cloudapp"><span>Sign in to CloudApp</span></a>
  137. <a href="#" class="zocial icon github"><span>Fork me on Github</span></a>
  138. <a href="#" class="zocial icon itunes"><span>Download on iTunes</span></a>
  139. <a href="#" class="zocial icon android"><span>Download on Android</span></a>
  140. <a href="#" class="zocial icon disqus"><span>Sign in with Disqus</span></a>
  141. <a href="#" class="zocial icon yahoo"><span>Sign in with Yahoo</span></a>
  142. <a href="#" class="zocial icon vimeo"><span>Upload to Vimeo</span></a>
  143. <a href="#" class="zocial icon chrome"><span>Add to Chrome</span></a>
  144. <a href="#" class="zocial icon ie"><span>Get a new browser</span></a>
  145. <a href="#" class="zocial icon html5"><span>Made from HTML5</span></a>
  146. <a href="#" class="zocial icon instapaper"><span>Read It Later</span></a>
  147. <a href="#" class="zocial icon scribd"><span>Read more on Scribd</span></a>
  148. <a href="#" class="zocial icon wikipedia"><span>View on Wikipedia</span></a>
  149. <a href="#" class="zocial icon flattr"><span>Tip with Flattr</span></a>
  150. <a href="#" class="zocial icon tumblr"><span>Follow me on Tumblr</span></a>
  151. <a href="#" class="zocial icon posterous"><span>Subscribe to my Posterous</span></a>
  152. <a href="#" class="zocial icon gowalla"><span>Check in with Gowalla</span></a>
  153. <a href="#" class="zocial icon foursquare"><span>Check in with foursquare</span></a>
  154. <a href="#" class="zocial icon yelp"><span>Write a review on Yelp</span></a>
  155. <a href="#" class="zocial icon soundcloud"><span>Follow me on Soundcloud</span></a>
  156. <a href="#" class="zocial icon smashing"><span>Read on Smashing Magazine</span></a>
  157. <a href="#" class="zocial icon wordpress"><span>Sign in with WordPress</span></a>
  158. <a href="#" class="zocial icon intensedebate"><span>Sign in with IntenseDebate</span></a>
  159. <a href="#" class="zocial icon openid"><span>Sign in with OpenID</span></a>
  160. <a href="#" class="zocial icon gmail"><span>Sign in with Gmail</span></a>
  161. <a href="#" class="zocial icon eventbrite"><span>Sign in with Eventbrite</span></a>
  162. <a href="#" class="zocial icon eventasaurus"><span>Sign in with Eventasaurus</span></a>
  163. <a href="#" class="zocial icon meetup"><span>Sign in with Meetup.com</span></a>
  164. <a href="#" class="zocial icon plancast"><span>Follow me on Plancast</span></a>
  165. <a href="#" class="zocial icon youtube"><span>Subscribe on YouTube</span></a>
  166. <a href="#" class="zocial icon appstore"><span>Available on the Mac App Store</span></a>
  167. <a href="#" class="zocial icon creativecommons"><span>View Creative Commons Licence</span></a>
  168. <a href="#" class="zocial icon rss"><span>Subscribe to RSS</span></a>
  169. <a href="#" class="zocial weibo icon"><span>Follow me on Weibo</span></a>
  170. <a href="#" class="zocial plurk icon"><span>Follow me on Plurk</span></a>
  171. <a href="#" class="zocial grooveshark icon"><span>Follow me on Grooveshark</span></a>
  172. <a href="#" class="zocial blogger icon"><span>Post on Blogger</span></a>
  173. <a href="#" class="zocial viadeo icon"><span>Sign in with Viadeo</span></a>
  174. <a href="#" class="zocial pinterest icon"><span>Follow me on Pinterest</span></a>
  175. <a href="#" class="zocial podcast icon"><span>Subscribe to this Podcast</span></a>
  176. <a href="#" class="zocial fivehundredpx icon"><span>View Portfolio on 500px</span></a>
  177. <a href="#" class="zocial bitcoin icon"><span>Bitcoin accepted here</span></a>
  178. <a href="#" class="zocial ninetyninedesigns icon"><span>View Portfolio on 99Designs</span></a>
  179. <a href="#" class="zocial quora icon"><span>Follow me on Quora</span></a>
  180. <a href="#" class="zocial pinboard icon"><span>Bookmark with Pinboard</span></a>
  181. <a href="#" class="zocial stumbleupon icon"><span>Stumble!</span></a>
  182. <a href="#" class="zocial call icon"><span>Call a phone</span></a>
  183. <a href="#" class="zocial email icon"><span>Send a message</span></a>
  184. <a href="#" class="zocial itunes icon"><span>Download on iTunes</span></a>
  185. <a href="#" class="zocial myspace icon"><span>Find me on Myspace</span></a>
  186. <p>See a demo and code at <a href="http://zocial.smcllns.com">zocial.smcllns.com</a> &mdash; ask questions (or request more buttons) to <a href="http://twitter.com/smcllns">@smcllns</a></p>
  187. <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://zocial.smcllns.com" data-via="smcllns">Tweet</a>
  188. <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>
  189. <script type="text/javascript">
  190. var _gaq = _gaq || [];
  191. _gaq.push(['_setAccount', 'UA-25061452-1']);
  192. _gaq.push(['_setDomainName', 'smcllns.com']);
  193. _gaq.push(['_setAllowHash', 'false']);
  194. _gaq.push(['_trackPageview']);
  195. _gaq.push(['_trackPageLoadTime']);
  196. (function() {
  197. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  198. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  199. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  200. })();
  201. </script>
  202. </body>
  203. </html>