Advanced Search

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.

Expand | Embed | Plain Text

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.