heuzef
/
css-social-buttons
mirror da https://github.com/smcllns/css-social-buttons
1
0
Forka 0
Codice Problemi 0 Rilasci 6 Wiki Attività
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
44 Commit
6 Rami (Branch)
18 MiB
 
 
Albero (Tree): 8192d7c9b4
Rami (Branch) Tag
${ item.name }
Crea branch ${ searchTerm }
da '8192d7c9b4'
${ noResults }
css-social-buttons/sample.html

228 righe
13 KiB
Originale Blame Cronologia 

  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. 	

  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: 16px;

  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. 	

  40. 	<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

  41. 	

  42. </head>

  43. 

  44. <body>

  45. 	<h2>The Popular Kids</h2>

  46. 	<a href="#" class="zocial facebook"><span>Sign in with Facebook</span></a>

  47. 	<a href="#" class="zocial googleplus"><span>Sign in with Google+</span></a>

  48. 	<a href="#" class="zocial twitter"><span>Sign in with Twitter</span></a>

  49. 	<a href="#" class="zocial linkedin"><span>Sign in with LinkedIn</span></a>

  50. 	

  51. 	<h2>The Cool Kids</h2>

  52. 	<a href="#" class="zocial dropbox"><span>Sync with Dropbox</span></a>

  53. 	<a href="#" class="zocial evernote"><span>Clip to Evernote</span></a>

  54. 	<a href="#" class="zocial forrst"><span>Follow me on Forrst</span></a>

  55. 	<a href="#" class="zocial dribbble"><span>Sign in with Dribbble</span></a>

  56. 	<a href="#" class="zocial cloudapp"><span>Sign in to CloudApp</span></a>

  57. 	<a href="#" class="zocial github"><span>Fork me on Github</span></a>

  58. 	<a href="#" class="zocial spotify"><span>Play on Spotify</span></a>

  59. 	<a href="#" class="zocial instapaper"><span>Read It Later</span></a>

  60. 	<a href="#" class="zocial soundcloud"><span>Follow me on Soundcloud</span></a>

  61. 	<a href="#" class="zocial tumblr"><span>Follow me on Tumblr</span></a>

  62. 	<a href="#" class="zocial smashing"><span>Read on Smashing Magazine</span></a>

  63. 	<a href="#" class="zocial itunes"><span>Available on iTunes</span></a>

  64. 	<a href="#" class="zocial appstore"><span>Available on the App Store</span></a>

  65. 	<a href="#" class="zocial macstore"><span>Available on the Mac App Store</span></a>

  66. 	<a href="#" class="zocial android"><span>Available on Android Market</span></a>

  67. 

  68. 	<h2>The Not-So-Cool But Have-To-Be-Invited Kids</h2>

  69. 	<a href="#" class="zocial paypal"><span>Pay with Paypal</span></a>

  70. 	<a href="#" class="zocial amazon"><span>Sign in with Amazon</span></a>

  71. 	<a href="#" class="zocial skype"><span>Call me on Skype</span></a>

  72. 	<a href="#" class="zocial lastfm"><span>Sign in with Last.fm</span></a>

  73. 	<a href="#" class="zocial yelp"><span>Write a review on Yelp</span></a>

  74. 	<a href="#" class="zocial foursquare"><span>Check in with foursquare</span></a>

  75. 	

  76. 	<h2>The Older (but Solid) Kids</h2>

  77. 	<a href="#" class="zocial wikipedia"><span>View on Wikipedia</span></a>

  78. 	<a href="#" class="zocial disqus"><span>Sign in with Disqus</span></a>

  79. 	<a href="#" class="zocial intensedebate"><span>Sign in with IntenseDebate</span></a>

  80. 	<a href="#" class="zocial google"><span>Sign in with Google</span></a>

  81. 	<a href="#" class="zocial gmail"><span>Sign in with Gmail</span></a>

  82. 	<a href="#" class="zocial vimeo"><span>Upload to Vimeo</span></a>

  83. 	<a href="#" class="zocial scribd"><span>Read more on Scribd</span></a>

  84. 	<a href="#" class="zocial youtube"><span>Subscribe on YouTube</span></a>

  85. 	<a href="#" class="zocial wordpress"><span>Sign in with WordPress</span></a>

  86. 	<a href="#" class="zocial songkick"><span>Sign in with Songkick</span></a>

  87. 	<a href="#" class="zocial posterous"><span>Sign in with Posterous</span></a>

  88. 	<a href="#" class="zocial eventbrite"><span>Sign in with Eventbrite</span></a>

  89. 	<a href="#" class="zocial flattr"><span>Tip with Flattr</span></a>

  90. 	<a href="#" class="zocial plancast"><span>Follow me on Plancast</span></a>

  91. 

  92. 	

  93. 	<h2>The Kids That Kinda Smell but Some People Don't Mind</h2>

  94. 	<a href="#" class="zocial yahoo"><span>Submit resume for CEO</span></a>

  95. 	<a href="#" class="zocial ie"><span>Download Internet Explorer 5</span></a>

  96. 	<a href="#" class="zocial meetup"><span>Report bugs with Meetup.com</span></a>

  97. 	<a href="#" class="zocial openid"><span>Learn how-to-use OpenID</span></a>

  98. 	<a href="#" class="zocial html5"><span>Register now for HTML6</span></a>

  99. 	<a href="#" class="zocial aol"><span>Chat with your parents</span></a>

  100. 	

  101. 	<h2>The Kids That Nobody Normally Notices</h2>

  102. 	<a href="#" class="zocial guest"><span>Sign in as guest</span></a>

  103. 	<a href="#" class="zocial creativecommons"><span>View Creative Commons Licence</span></a>

  104. 	<a href="#" class="zocial rss"><span>Subscribe to RSS</span></a>

  105. 	<a href="#" class="zocial chrome"><span>Add to Chrome</span></a>

  106. 	

  107. 	<h2>The He's-My-Son-So-Of-Course-He's-Here Kid</h2>

  108. 	<a href="#" class="zocial eventasaurus"><span>Sign up for Eventasaurus</span></a>

  109. 	

  110. 	<h2>Kids By Request</h2>

  111. 	<a href="#" class="zocial weibo"><span>Join me on Weibo</span></a>

  112. 	<a href="#" class="zocial plurk"><span>Sign in with Plurk</span></a>

  113. 	<a href="#" class="zocial grooveshark"><span>Play on Grooveshark</span></a>

  114. 	<a href="#" class="zocial blogger"><span>Post on Blogger</span></a>

  115. 	<a href="#" class="zocial viadeo"><span>Sign in with Viadeo</span></a>

  116. 	<a href="#" class="zocial pinterest"><span>Follow me on Pinterest</span></a>

  117. 	<a href="#" class="zocial podcast"><span>Subscribe to this Podcast</span></a>

  118. 	<a href="#" class="zocial fivehundredpx"><span>View Portfolio on 500px</span></a>

  119. 	<a href="#" class="zocial bitcoin"><span>Bitcoin accepted here</span></a>

  120. 	<a href="#" class="zocial ninetyninedesigns"><span>View Portfolio on 99Designs</span></a>

  121. 	<a href="#" class="zocial quora"><span>Follow me on Quora</span></a>

  122. 	<a href="#" class="zocial pinboard"><span>Bookmark with Pinboard</span></a>

  123. 	<a href="#" class="zocial stumbleupon"><span>Stumble!</span></a>

  124. 	<a href="#" class="zocial myspace"><span>Find me on Myspace</span></a>

  125. 	

  126. 	<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>

  127. 	<a href="#" class="zocial call"><span>Call a phone</span></a>

  128. 	<a href="#" class="zocial email"><span>Send a message</span></a>

  129. 	<br />

  130. 	<a href="#" class="zocial primary" title="A primary button for general purposes to keep consistency with Zocial"><span>Primary action</span></a>

  131. 	<a href="#" class="zocial secondary" title="A secondary button for general purposes to keep consistency with Zocial"><span>Secondary action</span></a>

  132. 	

  133. 

  134. 	<h2>Icon versions of the above</h2>

  135. 	<a href="#" class="zocial icon facebook"><span>Sign in with Facebook</span></a>

  136. 	<a href="#" class="zocial icon googleplus"><span>Sign in with Google+</span></a>

  137. 	<a href="#" class="zocial icon twitter"><span>Sign in with Twitter</span></a>

  138. 	<a href="#" class="zocial icon google"><span>Sign in with Google</span></a>

  139. 	<a href="#" class="zocial icon linkedin"><span>Sign in with LinkedIn</span></a>

  140. 	<a href="#" class="zocial icon paypal"><span>Pay with Paypal</span></a>

  141. 	<a href="#" class="zocial icon amazon"><span>Sign in with Amazon</span></a>

  142. 	<a href="#" class="zocial icon dropbox"><span>Sync with Dropbox</span></a>

  143. 	<a href="#" class="zocial icon evernote"><span>Clip to Evernote</span></a>

  144. 	<a href="#" class="zocial icon skype"><span>Call me on Skype</span></a>

  145. 	<a href="#" class="zocial icon guest"><span>Sign in as guest</span></a>

  146. 	<a href="#" class="zocial icon spotify"><span>Play on Spotify</span></a>

  147. 	<a href="#" class="zocial icon lastfm"><span>Sign in with Last.fm</span></a>

  148. 	<a href="#" class="zocial icon songkick"><span>Sign in with Songkick</span></a>

  149. 	<a href="#" class="zocial icon forrst"><span>Follow me on Forrst</span></a>

  150. 	<a href="#" class="zocial icon dribbble"><span>Sign in with Dribbble</span></a>

  151. 	<a href="#" class="zocial icon cloudapp"><span>Sign in to CloudApp</span></a>

  152. 	<a href="#" class="zocial icon github"><span>Fork me on Github</span></a>

  153. 	<a href="#" class="zocial icon itunes"><span>Download on iTunes</span></a>

  154. 	<a href="#" class="zocial icon android"><span>Download on Android</span></a>

  155. 	<a href="#" class="zocial icon disqus"><span>Sign in with Disqus</span></a>

  156. 	<a href="#" class="zocial icon yahoo"><span>Sign in with Yahoo</span></a>

  157. 	<a href="#" class="zocial icon vimeo"><span>Upload to Vimeo</span></a>

  158. 	<a href="#" class="zocial icon chrome"><span>Add to Chrome</span></a>

  159. 	<a href="#" class="zocial icon ie"><span>Get a new browser</span></a>

  160. 	<a href="#" class="zocial icon html5"><span>Made from HTML5</span></a>

  161. 	<a href="#" class="zocial icon instapaper"><span>Read It Later</span></a>

  162. 	<a href="#" class="zocial icon scribd"><span>Read more on Scribd</span></a>

  163. 	<a href="#" class="zocial icon wikipedia"><span>View on Wikipedia</span></a>

  164. 	<a href="#" class="zocial icon flattr"><span>Tip with Flattr</span></a>

  165. 	<a href="#" class="zocial icon tumblr"><span>Follow me on Tumblr</span></a>

  166. 	<a href="#" class="zocial icon posterous"><span>Subscribe to my Posterous</span></a>

  167. 	<a href="#" class="zocial icon gowalla"><span>Check in with Gowalla</span></a>

  168. 	<a href="#" class="zocial icon foursquare"><span>Check in with foursquare</span></a>

  169. 	<a href="#" class="zocial icon yelp"><span>Write a review on Yelp</span></a>

  170. 	<a href="#" class="zocial icon soundcloud"><span>Follow me on Soundcloud</span></a>

  171. 	<a href="#" class="zocial icon smashing"><span>Read on Smashing Magazine</span></a>

  172. 	<a href="#" class="zocial icon wordpress"><span>Sign in with WordPress</span></a>

  173. 	<a href="#" class="zocial icon intensedebate"><span>Sign in with IntenseDebate</span></a>

  174. 	<a href="#" class="zocial icon openid"><span>Sign in with OpenID</span></a>

  175. 	<a href="#" class="zocial icon gmail"><span>Sign in with Gmail</span></a>

  176. 	<a href="#" class="zocial icon eventbrite"><span>Sign in with Eventbrite</span></a>

  177. 	<a href="#" class="zocial icon eventasaurus"><span>Sign in with Eventasaurus</span></a>

  178. 	<a href="#" class="zocial icon meetup"><span>Sign in with Meetup.com</span></a>

  179. 	<a href="#" class="zocial icon plancast"><span>Follow me on Plancast</span></a>

  180. 	<a href="#" class="zocial icon youtube"><span>Subscribe on YouTube</span></a>

  181. 	<a href="#" class="zocial icon appstore"><span>Available on the Mac App Store</span></a>

  182. 	<a href="#" class="zocial icon creativecommons"><span>View Creative Commons Licence</span></a>

  183. 	<a href="#" class="zocial icon rss"><span>Subscribe to RSS</span></a>

  184. 	<a href="#" class="zocial weibo icon"><span>Follow me on Weibo</span></a>

  185. 	<a href="#" class="zocial plurk icon"><span>Follow me on Plurk</span></a>

  186. 	<a href="#" class="zocial grooveshark icon"><span>Follow me on Grooveshark</span></a>

  187. 	<a href="#" class="zocial blogger icon"><span>Post on Blogger</span></a>

  188. 	<a href="#" class="zocial viadeo icon"><span>Sign in with Viadeo</span></a>

  189. 	<a href="#" class="zocial pinterest icon"><span>Follow me on Pinterest</span></a>

  190. 	<a href="#" class="zocial podcast icon"><span>Subscribe to this Podcast</span></a>

  191. 	<a href="#" class="zocial fivehundredpx icon"><span>View Portfolio on 500px</span></a>

  192. 	<a href="#" class="zocial bitcoin icon"><span>Bitcoin accepted here</span></a>

  193. 	<a href="#" class="zocial ninetyninedesigns icon"><span>View Portfolio on 99Designs</span></a>

  194. 	<a href="#" class="zocial quora icon"><span>Follow me on Quora</span></a>

  195. 	<a href="#" class="zocial pinboard icon"><span>Bookmark with Pinboard</span></a>

  196. 	<a href="#" class="zocial stumbleupon icon"><span>Stumble!</span></a>

  197. 	<a href="#" class="zocial call icon"><span>Call a phone</span></a>

  198. 	<a href="#" class="zocial email icon"><span>Send a message</span></a>

  199. 	<a href="#" class="zocial itunes icon"><span>Download on iTunes</span></a>

  200. 	<a href="#" class="zocial myspace icon"><span>Find me on Myspace</span></a>

  201. 	

  202. 	

  203. 	

  204. 	<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>

  205. 	

  206. 	<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://zocial.smcllns.com" data-via="smcllns">Tweet</a>

  207. 	<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>

  208. 	

  209. 	<script type="text/javascript">

  210. 

  211. 	  var _gaq = _gaq || [];

  212. 	  _gaq.push(['_setAccount', 'UA-25061452-1']);

  213. 	  _gaq.push(['_setDomainName', 'smcllns.com']);

  214. 	  _gaq.push(['_setAllowHash', 'false']);

  215. 	  _gaq.push(['_trackPageview']);

  216. 	  _gaq.push(['_trackPageLoadTime']);

  217. 

  218. 	  (function() {

  219. 	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

  220. 	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

  221. 	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

  222. 	  })();

  223. 

  224. 	</script>

  225. 	

  226. </body>

  227. </html>