Social Media Boxes with like/+1 Button


/ Published in: CSS
Save to your folder(s)

Social media boxes with hover effect and +1 or like button.

Note: Firefox is buggy - It does not allow loading cross origin fonts (in iframes) - But it will definitely work when you try it out on your website/tests.


Copy this code and paste it in your HTML
  1. HTML:
  2.  
  3. <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,600,700,300' rel='stylesheet' type='text/css'>
  4. <div class="smhold red">
  5. <div class="shine">
  6. <span class="info_txt">Google +
  7. </span>
  8. <span class="icons google">a
  9. </span>
  10. <span class="vbutton">
  11. <g:plusone size="medium" href="http://www.megawrz.com">
  12. </g:plusone>
  13. <script type="text/javascript">
  14. (function() {
  15. var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  16. po.src = 'https://apis.google.com/js/plusone.js';
  17. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  18. })();
  19. </script>
  20. </span>
  21. </div>
  22. </div>
  23. <div class="smhold blue">
  24. <div class="shine">
  25. <span class="info_txt">Facebook
  26. </span>
  27. <span class="icons facebook">b
  28. </span>
  29. <span class="vbutton">
  30. <iframe src="http://www.facebook.com/plugins/like.php?href=www.megawrz.com&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:80px;" allowTransparency="true">
  31. </iframe>
  32. </span>
  33. </div>
  34. </div>
  35. <div class="smhold lightblue">
  36. <div class="shine">
  37. <span class="info_txt">Twitter
  38. </span>
  39. <span class="icons twitter">c
  40. </span>
  41. <span class="vbutton">
  42. <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.megawrz.com">Tweet</a>
  43. <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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  44. </span>
  45. </div>
  46. </div>
  47. <div class="smhold orange">
  48. <div class="shine">
  49. <span class="info_txt">RSS Feed
  50. </span>
  51. <span class="icons rss">e
  52. </span>
  53. </div>
  54. </div>
  55. <div class="smhold darkblue">
  56. <div class="shine">
  57. <span class="info_txt">tumblr
  58. </span>
  59. <span class="icons tumblr">d
  60. </span>
  61. <span class="vbutton">
  62. <a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a>
  63. </span>
  64. </div>
  65. </div>
  66. <div class="smhold vimeoblue">
  67. <div class="shine">
  68. <span class="info_txt">Vimeo
  69. </span>
  70. <span class="icons vimeo">f
  71. </span>
  72. </div>
  73. </div>
  74. <div class="smhold flickrpink">
  75. <div class="shine">
  76. <span class="info_txt">Flickr
  77. </span>
  78. <span class="icons flickr">g
  79. </span>
  80. </div>
  81. </div>
  82. <div class="smhold picasapurple">
  83. <div class="shine">
  84. <span class="info_txt">Picasa
  85. </span>
  86. <span class="icons picasa">h
  87. </span>
  88. </div>
  89. </div>
  90. <div class="smhold dribbblepink">
  91. <div class="shine">
  92. <span class="info_txt">Dribbble
  93. </span>
  94. <span class="icons dribbble">i
  95. </span>
  96. </div>
  97. </div>
  98. <div class="smhold forrstgreen">
  99. <div class="shine">
  100. <span class="info_txt">Forrst
  101. </span>
  102. <span class="icons forrst">j
  103. </span>
  104. </div>
  105. </div>
  106. <div class="smhold deviantartgreen">
  107. <div class="shine">
  108. <span class="info_txt">DeviantART
  109. </span>
  110. <span class="icons deviantart">k
  111. </span>
  112. </div>
  113. </div>
  114. <div class="smhold githubblue">
  115. <div class="shine">
  116. <span class="info_txt">GitHub
  117. </span>
  118. <span class="icons github">l
  119. </span>
  120. </div>
  121. </div>
  122. <div class="smhold youtubered">
  123. <div class="shine">
  124. <span class="info_txt">YouTube
  125. </span>
  126. <span class="icons youtube">n
  127. </span>
  128. </div>
  129. </div>
  130. <div class="smhold wordpressblue">
  131. <div class="shine">
  132. <span class="info_txt">Wordpress
  133. </span>
  134. <span class="icons wordpress">o
  135. </span>
  136. </div>
  137. </div>
  138. <div class="smhold bloggerorange">
  139. <div class="shine">
  140. <span class="info_txt">Blogger
  141. </span>
  142. <span class="icons blogger">p
  143. </span>
  144. </div>
  145. </div>
  146. <div class="smhold amazonorange">
  147. <div class="shine">
  148. <span class="info_txt">Amazon
  149. </span>
  150. <span class="icons amazon">q
  151. </span>
  152. </div>
  153. </div>
  154. <div class="smhold applegrey">
  155. <div class="shine">
  156. <span class="info_txt">Apple
  157. </span>
  158. <span class="icons apple">r
  159. </span>
  160. </div>
  161. </div>
  162. <div class="smhold androidgreen">
  163. <div class="shine">
  164. <span class="info_txt">Android
  165. </span>
  166. <span class="icons android">s
  167. </span>
  168. </div>
  169. </div>
  170. <div class="smhold skypeblue">
  171. <div class="shine">
  172. <span class="info_txt">Skype
  173. </span>
  174. <span class="icons skype">t
  175. </span>
  176. </div>
  177. </div>
  178. <div class="smhold pinterestred">
  179. <div class="shine">
  180. <span class="info_txt">Pinterest
  181. </span>
  182. <span class="icons pinterest">v
  183. </span>
  184. </div>
  185. </div>
  186. <div class="smhold lastfmred">
  187. <div class="shine">
  188. <span class="info_txt">Lastfm
  189. </span>
  190. <span class="icons lastfm">u
  191. </span>
  192. </div>
  193. </div>
  194. <div class="smhold xinggreen">
  195. <div class="shine">
  196. <span class="info_txt">Xing
  197. </span>
  198. <span class="icons xing">w
  199. </span>
  200. </div>
  201. </div>
  202.  
  203.  
  204.  
  205. CSS:
  206.  
  207. body {
  208. font-family: 'Open Sans', sans-serif;
  209. margin: 0 auto;
  210. background: url(http://subtlepatterns.com/patterns/dark_wood.png) center fixed;
  211. }
  212. .smhold:hover .icons {
  213. font-size: 200px !important;
  214. }
  215. .smhold {
  216. height: 100px;
  217. overflow: hidden;
  218. width: 320px;
  219. margin: 20px auto;
  220. box-shadow: 0 0 8px 0px rgba(0,0,0,0.4),
  221. 0 0 0px 1px rgba(0,0,0,0.4),
  222. inset 0 0 0px 1px rgba(255,255,255,0.3);
  223. }
  224. .red {
  225. background: #cb0000;
  226. }
  227. .google {
  228. position: absolute;
  229. right: 10px;
  230. }
  231. .blue {
  232. background: #3B5998;
  233. }
  234. .facebook {
  235. position: absolute;
  236. right: 10px;
  237. }
  238. .lightblue {
  239. background: #4099FF;
  240. }
  241. .twitter {
  242. position: absolute;
  243. right: 10px;
  244. font-size: 120px !important;
  245. }
  246. .orange {
  247. background: #FF7F00;
  248. }
  249. .rss {
  250. position: absolute;
  251. right: 10px;
  252. font-size: 100px !important;
  253. }
  254. .darkblue {
  255. background: #31546f;
  256. }
  257. .tumblr {
  258. position: absolute;
  259. right: 10px;
  260. font-size: 110px !important;
  261. }
  262. .vimeoblue {
  263. background: #00adef;
  264. }
  265. .vimeo {
  266. position: absolute;
  267. right: 10px;
  268. }
  269. .flickrpink {
  270. background: #FF0084;
  271. }
  272. .flickr {
  273. position: absolute;
  274. right: 10px;
  275. top: -25px;
  276. }
  277. .picasapurple {
  278. background: #9864ae;
  279. }
  280. .picasa {
  281. position: absolute;
  282. right: 10px;
  283. }
  284. .dribbblepink {
  285. background: #c7386e;
  286. }
  287. .dribbble {
  288. position: absolute;
  289. right: 10px;
  290. }
  291. .forrstgreen {
  292. background: #345129;
  293. }
  294. .forrst {
  295. position: absolute;
  296. right: 10px;
  297. top: -35px;
  298. }
  299. .deviantartgreen {
  300. background: #002e21;
  301. }
  302. .deviantart {
  303. position: absolute;
  304. right: 10px;
  305. top: -10px;
  306. }
  307. .githubblue {
  308. background: #4b6574;
  309. }
  310. .github {
  311. position: absolute;
  312. right: 10px;
  313. }
  314. .youtubered {
  315. background: #cb0000;
  316. }
  317. .youtube {
  318. position: absolute;
  319. right: 10px;
  320. }
  321. .wordpressblue {
  322. background: #1c4162;
  323. }
  324. .wordpress {
  325. position: absolute;
  326. right: 10px;
  327. }
  328. .bloggerorange {
  329. background: #FF7F00;
  330. }
  331. .blogger {
  332. position: absolute;
  333. right: 10px;
  334. top: -10px;
  335. }
  336. .amazonorange {
  337. background: #e6940a;
  338. }
  339. .amazon {
  340. position: absolute;
  341. right: 10px;
  342. top: -20px;
  343. }
  344. .applegrey {
  345. background: #666;
  346. }
  347. .apple {
  348. position: absolute;
  349. right: 10px;
  350. }
  351. .androidgreen {
  352. background: #a4c63b;
  353. }
  354. .android {
  355. position: absolute;
  356. right: 10px;
  357. }
  358. .skypeblue {
  359. background: #00aff0;
  360. }
  361. .skype {
  362. position: absolute;
  363. right: 10px;
  364. }
  365. .pinterestred {
  366. background: #cb2026;
  367. }
  368. .pinterest {
  369. position: absolute;
  370. right: 10px;
  371. }
  372. .xinggreen {
  373. background: #005a5f;
  374. }
  375. .xing {
  376. position: absolute;
  377. right: 10px;
  378. }
  379. .lastfmred {
  380. background: #d9004a;
  381. }
  382. .lastfm {
  383. position: absolute;
  384. right: 10px;
  385. }
  386. .info_txt {
  387. display: inline-block;
  388. position: absolute;
  389. background: rgb(255,255,255);
  390. background: url(data: image/svg+xml;
  391. base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNGY0ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  392. background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%);
  393. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(244,244,244,1)));
  394. background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%);
  395. background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%);
  396. background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%);
  397. background: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%);
  398. filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );
  399. -webkit-border-radius: 5px;
  400. -moz-border-radius: 5px;
  401. border-radius: 5px;
  402. top: -5px;
  403. left: -5px;
  404. padding: 10px 5px 5px 10px;
  405. box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 1);
  406. color: #666;
  407. font-size: 11px;
  408. text-shadow: 1px 1px 0px white;
  409. }
  410. .vbutton {
  411. position: absolute;
  412. top: 75px;
  413. left: 5px;
  414. }
  415. .shine {
  416. height: 100px;
  417. overflow: hidden;
  418. width: 320px;
  419. position: relative;
  420. background: url(data: image/svg+xml;
  421. base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjQiLz4KICAgIDxzdG9wIG9mZnNldD0iNjklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
  422. background: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.01) 69%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%);
  423. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(69%,rgba(0,0,0,0.01)), color-stop(70%,rgba(0,0,0,0.1)), color-stop(100%,rgba(0,0,0,0)));
  424. background: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.01) 69%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%);
  425. background: -o-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.01) 69%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%);
  426. background: -ms-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.01) 69%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%);
  427. background: linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.01) 69%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%);
  428. filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#66ffffff', endColorstr='#00000000',GradientType=0 );
  429. }
  430. .icons {
  431. font-family: 'IcoMoon';
  432. font-size: 134px;
  433. color: rgba(255,255,255,1);
  434. text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
  435. -webkit-transition: all .25s ease-in-out;
  436. -moz-transition: all .25s ease-in-out;
  437. -o-transition: all .25s ease-in-out;
  438. -ms-transition: all .25s ease-in-out;
  439. transition: all .25s ease-in-out;
  440. cursor: pointer;
  441. }
  442. @font-face {
  443. font-family: 'IcoMoon';
  444. src: url('http://www.mediumidee.de/fonts/IcoMoon.eot');
  445. src: url('http://www.mediumidee.de/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'),
  446. url('http://www.mediumidee.de/fonts/IcoMoon.woff') format('woff'),
  447. url('http://www.mediumidee.de/fonts/IcoMoon.ttf') format('truetype');
  448. font-weight: normal;
  449. font-style: normal;
  450. }
  451. /* Use the following CSS code if you want to use data attributes for inserting your icons */
  452. [data-icon]:before {
  453. font-family: 'IcoMoon';
  454. content: attr(data-icon);
  455. speak: none;
  456. }
  457. /* Use the following CSS code if you want to have a class per icon */
  458. [class^="icon-"]:before, [class*=" icon-"]:before {
  459. font-family: 'IcoMoon';
  460. font-style: normal;
  461. speak: none;
  462. }
  463. .icon-google-plus:before {
  464. content: "\0061";
  465. }
  466. .icon-facebook:before {
  467. content: "\0062";
  468. }
  469. .icon-twitter:before {
  470. content: "\0063";
  471. }
  472. .icon-twitter-2:before {
  473. content: "\0064";
  474. }
  475. .icon-feed:before {
  476. content: "\0065";
  477. }
  478. .icon-vimeo:before {
  479. content: "\0066";
  480. }
  481. .icon-flickr:before {
  482. content: "\0067";
  483. }
  484. .icon-picassa:before {
  485. content: "\0068";
  486. }
  487. .icon-dribbble:before {
  488. content: "\0069";
  489. }
  490. .icon-forrst:before {
  491. content: "\006a";
  492. }
  493. .icon-deviantart:before {
  494. content: "\006b";
  495. }
  496. .icon-github:before {
  497. content: "\006c";
  498. }
  499. .icon-github-2:before {
  500. content: "\006d";
  501. }
  502. .icon-youtube:before {
  503. content: "\006e";
  504. }
  505. .icon-wordpress:before {
  506. content: "\006f";
  507. }
  508. .icon-blogger:before {
  509. content: "\0070";
  510. }
  511. .icon-amazon:before {
  512. content: "\0071";
  513. }
  514. .icon-apple:before {
  515. content: "\0072";
  516. }
  517. .icon-android:before {
  518. content: "\0073";
  519. }
  520. .icon-skype:before {
  521. content: "\0074";
  522. }
  523. .icon-lastfm:before {
  524. content: "\0075";
  525. }
  526. .icon-pinterest:before {
  527. content: "\0076";
  528. }
  529. .icon-xing:before {
  530. content: "\0077";
  531. }

URL: http://www.megawrz.com/css/193100-social-media-boxes-like-1-button.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.