heuzef
/
css-social-buttons
Mirror von https://github.com/smcllns/css-social-buttons
1
0
Fork 0
Code Issues 0 Releases 6 Wiki Aktivität
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
44 Commits
6 Branches
18 MiB
 
 
Struktur: 8192d7c9b4
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „8192d7c9b4“
${ noResults }
css-social-buttons/css/zocial.css

367 Zeilen
15 KiB
Originalformat Blame Verlauf 

  1. /*!

  2. Code written by Sam Collins (@smcllns) of www.eventasaur.us

  3. You are free to use this work commercially

  4. You are free to extend this work without permissions from the author (just do so tastefully eh?)

  5. Enjoy

  6. */

  7. 

  8. /* Reference icons from font-files */

  9. 

  10. @font-face {

  11. 	font-family: 'zocial';

  12. 	font-style: normal;

  13. 	font-weight: normal;

  14. 	src: url('zocial-regular-webfont.eot');

  15. 	src: url('zocial-regular-webfont.eot?#iefix') format('embedded-opentype'),

  16. 		url('zocial-regular-webfont.woff') format('woff'),

  17. 		url('zocial-regular-webfont.ttf') format('truetype'),

  18. 		url('zocial-regular-webfont.svg#ZocialRegular') format('svg');

  19. }

  20. 

  21. /* Button structure */

  22. 

  23. .zocial {

  24. 	border-bottom-color: rgba(0,0,0,0.4);

  25. 	border: 1px solid rgba(0,0,0,0.2);

  26. 	color: #fff !important;

  27. 	-moz-box-shadow: inset 0 0.099em 0 rgba(255,255,255,0.4), inset 0 0 0.099em rgba(255,255,255,0.6);

  28. 	-webkit-box-shadow: inset 0 0.099em 0 rgba(255,255,255,0.4), inset 0 0 0.099em rgba(255,255,255,0.6);

  29. 	box-shadow: inset 0 0.099em 0 rgba(255,255,255,0.4), inset 0 0 0.099em rgba(255,255,255,0.6);

  30. 	cursor: pointer;

  31. 	display: inline-block;

  32. 	font-family: "Lucida Grande", Tahoma, sans-serif;

  33. 	font-size: 1em;

  34. 	font-style: normal !important;

  35. 	font-weight: bold !important;

  36. 	letter-spacing: 0;

  37. 	line-height: 1.6em;

  38. 	padding: 0;

  39. 	position: relative;

  40. 	text-decoration: none !important;

  41. 	text-shadow: 0 1px 0 rgba(0,0,0,0.5);

  42. 	-moz-user-select: none !important;

  43. 	-webkit-user-select: none !important;

  44. 	user-select: none !important;

  45. }

  46. 

  47. .zocial > span:before {

  48. 	border-right: 0.075em solid rgba(0,0,0,0.1);

  49. 	-moz-box-shadow: 0.075em 0 0 rgba(255,255,255,0.25);

  50. 	-webkit-box-shadow: 0.075em 0 0 rgba(255,255,255,0.25);

  51. 	box-shadow: 0.075em 0 0 rgba(255,255,255,0.25);

  52. 	content: "";

  53. 	display: block;

  54. 	float: left;

  55. 	font-family: "zocial" !important;

  56. 	font-size: 1.25em;

  57. 	font-style: normal !important;

  58. 	font-weight: normal !important;

  59. 	margin: 0.1em 0.5em 0 0;

  60. 	min-height: 1em;

  61. 	padding: 0 0.5em;

  62. 	text-align: center !important;

  63. 	text-decoration: none !important;

  64. 	text-transform: none !important;

  65. }

  66. .zocial > span {

  67. 	display: block;

  68. 	font-size: 80%;

  69. 	font-weight: bold;

  70. 	padding: 0em 1em 0 0;

  71. 	white-space: nowrap;

  72. }

  73. 

  74. .zocial,

  75. .zocial > span {

  76. 	-moz-border-radius: 0.2em;

  77. 	-webkit-border-radius: 0.2em;

  78. 	border-radius: 0.2em;

  79. 	position: relative;

  80. 	z-index: 100;

  81. }

  82. 

  83. .zocial:active {

  84. 	outline: none; /* outline is visible on :focus */

  85. }

  86. 

  87. /* Buttons can be displayed as standalone icons by adding a class of "icon" */

  88. 

  89. .zocial.icon {

  90. 	overflow: hidden;

  91. 	width: 1.85em;

  92. }

  93. .zocial.icon > span:before {

  94. 	padding: 0;

  95. 	width: 1.85em;

  96. }

  97. 

  98. /* Gradients */

  99. 

  100. .zocial > span {

  101. 	background: -moz-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.05) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.1));

  102. 	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.1)), color-stop(49%, rgba(255,255,255,0.05)), color-stop(51%, rgba(0,0,0,0.05)), to(rgba(0,0,0,0.1)));

  103. 	background: -webkit-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.05) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.1));

  104. 	background: linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.05) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.1));

  105. }

  106. 

  107. .zocial:hover > span, .zocial:focus > span {

  108. 	background: -moz-linear-gradient(top, rgba(255,255,255,0.15), rgba(255,255,255,0.15) 49%, rgba(0,0,0,0.1) 51%, rgba(0,0,0,0.15));

  109. 	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.15)), color-stop(49%, rgba(255,255,255,0.15)), color-stop(51%, rgba(0,0,0,0.1)), to(rgba(0,0,0,0.15)));

  110. 	background: -webkit-linear-gradient(top, rgba(255,255,255,0.15), rgba(255,255,255,0.15) 49%, rgba(0,0,0,0.1) 51%, rgba(0,0,0,0.15));

  111. 	background: linear-gradient(top, rgba(255,255,255,0.15), rgba(255,255,255,0.15) 49%, rgba(0,0,0,0.1) 51%, rgba(0,0,0,0.15));

  112. }

  113. 

  114. .zocial:active > span {

  115. 	background: -moz-linear-gradient(bottom, rgba(255,255,255,0.1), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1));

  116. 	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.1)), color-stop(30%, rgba(255,255,255,0)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,0.1)));

  117. 	background: -webkit-linear-gradient(bottom, rgba(255,255,255,0.1), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1));

  118. 	background: linear-gradient(bottom, rgba(255,255,255,0.1), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1));

  119. }

  120. 

  121. /* Adjustments for light background buttons */

  122. 

  123. .zocial.bitcoin,

  124. .zocial.cloudapp,

  125. .zocial.dropbox,

  126. .zocial.email,

  127. .zocial.github,

  128. .zocial.gmail,

  129. .zocial.instapaper,

  130. .zocial.itunes,

  131. .zocial.ninetyninedesigns,

  132. .zocial.openid,

  133. .zocial.plancast,

  134. .zocial.posterous,

  135. .zocial.secondary,

  136. .zocial.viadeo,

  137. .zocial.weibo,

  138. .zocial.wikipedia {

  139. 	border: 1px solid rgba(0,0,0,0.3);

  140. 	border-bottom-color: rgba(0,0,0,0.5);

  141. 	-moz-box-shadow: inset 0 0.099em 0 rgba(255,255,255,0.8), inset 0 0 0.099em rgba(255,255,255,0.5);

  142. 	-webkit-box-shadow: inset 0 0.099em 0 rgba(255,255,255,0.8), inset 0 0 0.099em rgba(255,255,255,0.5);

  143. 	box-shadow: inset 0 0.099em 0 rgba(255,255,255,0.8), inset 0 0 0.099em rgba(255,255,255,0.5);

  144. 	text-shadow: 0 1px 0 rgba(255,255,255,0.8);

  145. }

  146. 

  147. /* :hover adjustments for light background buttons */

  148. 

  149. .zocial.bitcoin:focus > span,

  150. .zocial.bitcoin:hover > span,

  151. .zocial.dropbox:focus > span,

  152. .zocial.dropbox:hover > span,

  153. .zocial.email:focus > span,

  154. .zocial.email:hover > span,

  155. .zocial.github:focus > span,

  156. .zocial.github:hover > span,

  157. .zocial.gmail:focus > span,

  158. .zocial.gmail:hover > span,

  159. .zocial.instapaper:focus > span,

  160. .zocial.instapaper:hover > span,

  161. .zocial.itunes:focus > span,

  162. .zocial.itunes:hover > span,

  163. .zocial.ninetyninedesigns:focus > span,

  164. .zocial.ninetyninedesigns:hover > span,

  165. .zocial.openid:focus > span,

  166. .zocial.openid:hover > span,

  167. .zocial.plancast:focus > span,

  168. .zocial.plancast:hover > span,

  169. .zocial.posterous:focus > span,

  170. .zocial.posterous:hover > span,

  171. .zocial.secondary:focus > span,

  172. .zocial.secondary:hover > span,

  173. .zocial.twitter:focus > span,

  174. .zocial.viadeo:focus > span,

  175. .zocial.viadeo:hover > span,

  176. .zocial.weibo:focus > span,

  177. .zocial.weibo:hover > span,

  178. .zocial.wikipedia:focus > span,

  179. .zocial.wikipedia:hover > span {

  180. 	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.5)), color-stop(49%, rgba(255,255,255,0.2)), color-stop(51%, rgba(0,0,0,0.05)), to(rgba(0,0,0,0.15)));

  181. 	background: -moz-linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.15));

  182. 	background: -webkit-linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.15));

  183. 	background: linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.15));

  184. }

  185. 

  186. /* :active adjustments for light background buttons */

  187. 

  188. .zocial.bitcoin:active > span,

  189. .zocial.dropbox:active > span,

  190. .zocial.email:active > span,

  191. .zocial.github:active > span,

  192. .zocial.gmail:active > span,

  193. .zocial.instapaper:active > span,

  194. .zocial.itunes:active > span,

  195. .zocial.ninetyninedesigns:active > span,

  196. .zocial.openid:active > span,

  197. .zocial.plancast:active > span,

  198. .zocial.posterous:active > span,

  199. .zocial.secondary:active > span,

  200. .zocial.viadeo:active > span,

  201. .zocial.weibo:active > span,

  202. .zocial.wikipedia:active > span {

  203. 	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), color-stop(30%, rgba(255,255,255,0)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,0.1)));

  204. 	background: -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1));

  205. 	background: -webkit-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1));

  206. 	background: linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1));

  207. }

  208. 

  209. /* Button icon and color */

  210. 

  211. .zocial.amazon > span:before {content: "a";}

  212. .zocial.android > span:before {content: "&";}

  213. .zocial.aol > span:before {content: "\"";}

  214. .zocial.appstore > span:before {content: "A";}

  215. .zocial.bitcoin > span:before {content: "2"; color: #f7931a !important;}

  216. .zocial.blogger > span:before {content: "B";}

  217. .zocial.call > span:before {content: "7";}

  218. .zocial.chrome > span:before {content: "[";}

  219. .zocial.cloudapp > span:before {content: "c";}

  220. .zocial.creativecommons > span:before {content: "C";}

  221. .zocial.disqus > span:before {content: "Q";}

  222. .zocial.dribbble > span:before {content: "D";}

  223. .zocial.dropbox > span:before {content: "d"; color: #1f75cc !important;}

  224. .zocial.email > span:before {content: "]"; color: #312c2a !important;}

  225. .zocial.eventasaurus > span:before {content: "v";}

  226. .zocial.eventbrite > span:before {content: "|";}

  227. .zocial.evernote > span:before {content: "E";}

  228. .zocial.facebook > span:before {content: "f";}

  229. .zocial.fivehundredpx > span:before {content: "0"; color: #29b6ff !important;}

  230. .zocial.flattr > span:before {content: "%";}

  231. .zocial.forrst > span:before {content: ":"; color: #50894f !important;}

  232. .zocial.foursquare > span:before {content: "4";}

  233. .zocial.github > span:before {content: "g";}

  234. .zocial.gmail > span:before {content: "m"; color: #f00 !important;}

  235. .zocial.google > span:before {content: "G";}

  236. .zocial.googleplus > span:before {content: "+";}

  237. .zocial.gowalla > span:before {content: "@";}

  238. .zocial.grooveshark > span:before {content: "K";}

  239. .zocial.guest > span:before {content: "?";}

  240. .zocial.html5 > span:before {content: "5";}

  241. .zocial.ie > span:before {content: "6";}

  242. .zocial.instapaper > span:before {content: "I";}

  243. .zocial.intensedebate > span:before {content: "{";}

  244. .zocial.itunes > span:before {content: "i"; color: #1a6dd2 !important;}

  245. .zocial.lastfm > span:before {content: "l";}

  246. .zocial.linkedin > span:before {content: "L";}

  247. .zocial.macstore > span:before {content: "^";}

  248. .zocial.meetup > span:before {content: "M";}

  249. .zocial.myspace > span:before {content: "_";}

  250. .zocial.ninetyninedesigns > span:before {content: "9"; color: #f50 !important;}

  251. .zocial.openid > span:before {content: "o"; color: #ff921d !important;}

  252. .zocial.paypal > span:before {content: "$";}

  253. .zocial.pinboard > span:before {content: "n";}

  254. .zocial.pinterest > span:before {content: "1";}

  255. .zocial.plancast > span:before {content: "P";}

  256. .zocial.plurk > span:before {content: "j";}

  257. .zocial.podcast > span:before {content: "`";}

  258. .zocial.posterous > span:before {content: "~";}

  259. .zocial.quora > span:before {content: "q";}

  260. .zocial.rss > span:before {content: "R";}

  261. .zocial.scribd > span:before {content: "}"; color: #00d5ea !important;}

  262. .zocial.skype > span:before {content: "S";}

  263. .zocial.smashing > span:before {content: "*";}

  264. .zocial.songkick > span:before {content: "k";}

  265. .zocial.soundcloud > span:before {content: "s";}

  266. .zocial.spotify > span:before {content: "=";}

  267. .zocial.stumbleupon > span:before {content: "/";}

  268. .zocial.tumblr > span:before {content: "t";}

  269. .zocial.twitter > span:before {content: "T";}

  270. .zocial.viadeo > span:before {content: "H"; color: #f59b20 !important;}

  271. .zocial.vimeo > span:before {content: "V";}

  272. .zocial.weibo > span:before {content: "J"; color: #e6162d !important;}

  273. .zocial.wikipedia > span:before {content: ",";}

  274. .zocial.wordpress > span:before {content: "w";}

  275. .zocial.yahoo > span:before {content: "Y";}

  276. .zocial.yelp > span:before {content: "y";}

  277. .zocial.youtube > span:before {content: "U";}

  278. 

  279. /* Button background and text color */

  280. 

  281. .zocial.amazon {background: #ffad1d; color: #030037 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.5);}

  282. .zocial.android {background: #a4c639;}

  283. .zocial.aol {background: #f00;}

  284. .zocial.appstore {background: #000;}

  285. .zocial.bitcoin {background: #efefef; color: #4d4d4d !important;}

  286. .zocial.blogger {background: #ee5a22;}

  287. .zocial.call {background: #008000;}

  288. .zocial.chrome {background: #006cd4;}

  289. .zocial.cloudapp {background: #fff; color: #312c2a !important;}

  290. .zocial.creativecommons {background: #000;}

  291. .zocial.disqus {background: #5d8aad;}

  292. .zocial.dribbble {background: #ea4c89;}

  293. .zocial.dropbox {background: #fff; color: #312c2a !important;}

  294. .zocial.email {background: #f0f0eb; color: #312c2a !important;}

  295. .zocial.eventasaurus {background: #8ccc33;}

  296. .zocial.eventbrite {background: #ff5616;}

  297. .zocial.evernote {background: #6bb130; color: #fff !important;}

  298. .zocial.facebook {background: #4863ae;}

  299. .zocial.fivehundredpx {background: #333;}

  300. .zocial.flattr {background: #8aba42;}

  301. .zocial.forrst {background: #1e360d;}

  302. .zocial.foursquare {background: #44a8e0;}

  303. .zocial.github {background: #fbfbfb; color: #050505 !important;}

  304. .zocial.gmail {background: #efefef; color: #222 !important;}

  305. .zocial.google {background: #4e6cf7;}

  306. .zocial.googleplus {background: #dd4b39;}

  307. .zocial.gowalla {background: #ff720a;}

  308. .zocial.grooveshark {background: #111; color:#eee !important;}

  309. .zocial.guest {background: #1b4d6d;}

  310. .zocial.html5 {background: #ff3617;}

  311. .zocial.ie {background: #00a1d9;}

  312. .zocial.instapaper {background: #eee; color: #222 !important;}

  313. .zocial.intensedebate {background: #0099e1;}

  314. .zocial.itunes {background: #efefeb; color: #312c2a !important;}

  315. .zocial.lastfm {background: #dc1a23;}

  316. .zocial.linkedin {background: #0083a8;}

  317. .zocial.macstore {background: #007dcb}

  318. .zocial.meetup {background: #ff0026;}

  319. .zocial.myspace {background: #000;}

  320. .zocial.ninetyninedesigns {background: #fff; color: #072243 !important;}

  321. .zocial.openid {background: #f5f5f5; color: #333 !important;}

  322. .zocial.paypal {background: #ff921d; color: #032751 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.5);}

  323. .zocial.pinboard {background: blue;}

  324. .zocial.pinterest {background: #c91618;}

  325. .zocial.plancast {background: #e7ebed; color: #333 !important;}

  326. .zocial.plurk {background: #cf682f;}

  327. .zocial.podcast {background: #9365ce;}

  328. .zocial.posterous {background: #ffd959; color: #bc7134 !important;}

  329. .zocial.quora {background: #a82400;}

  330. .zocial.rss {background: #ff7f25;}

  331. .zocial.scribd {background: #231c1a;}

  332. .zocial.skype {background: #00a2ed;}

  333. .zocial.smashing {background: #ff4f27;}

  334. .zocial.songkick {background: #ff0050;}

  335. .zocial.soundcloud {background: #ff4500;}

  336. .zocial.spotify {background: #60af00;}

  337. .zocial.stumbleupon {background: #eb4924;}

  338. .zocial.tumblr {background: #374a61;}

  339. .zocial.twitter {background: #46c0fb;}

  340. .zocial.viadeo {background: #fff;  color: #000 !important;}

  341. .zocial.vimeo {background: #00a2cd;}

  342. .zocial.weibo {background: #faf6f1; color: #000 !important;}

  343. .zocial.wikipedia {background: #fff; color: #000 !important;}

  344. .zocial.wordpress {background: #464646;}

  345. .zocial.yahoo {background: #a200c2;}

  346. .zocial.yelp {background: #e60010;}

  347. .zocial.youtube {background: #f00;}

  348. 

  349. /*

  350. The Miscellaneous Buttons

  351. These button have no icons and can be general purpose buttons while ensuring consistent button style

  352. Credit to @guillermovs for suggesting

  353. */

  354. 

  355. .zocial.primary > span, .zocial.secondary > span {margin: 0.1em 0; padding: 0 1em;}

  356. .zocial.primary > span:before, .zocial.secondary > span:before {display: none;}

  357. .zocial.primary {background: #333;}

  358. .zocial.secondary {background: #f0f0eb; color: #222 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.8);}

  359. 

  360. /* Any browser-specific adjustments */

  361. 

  362. button::-moz-focus-inner {

  363. 	border: 0;

  364. 	padding: 0;

  365. }