Posted By

jntu_gnec on 06/07/12

Tagged

Versions (?)

Last Edited at 06/07/12 01:45am

Statistics

Viewed 464 times

Favorited by 0 user(s)

Related snippets

Social Media Boxes with like/+1 Button

/ Published in: CSS

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.

Highlighted TextExpand

HTML:

CSS:

body { 
    font-family: 'Open Sans', sans-serif; 
    margin: 0 auto; 
    background: url(http://subtlepatterns.com/patterns/dark_wood.png) center fixed; 
} 
.smhold:hover .icons { 
    font-size: 200px !important; 
} 
.smhold { 
    height: 100px; 
    overflow: hidden; 
    width: 320px; 
    margin: 20px auto; 
    box-shadow: 0 0 8px 0px rgba(0,0,0,0.4), 
  0 0 0px 1px rgba(0,0,0,0.4),  
  inset  0 0 0px 1px rgba(255,255,255,0.3); 
} 
.red { 
    background: #cb0000; 
} 
.google { 
    position: absolute; 
    right: 10px; 
} 
.blue { 
    background: #3B5998; 
} 
.facebook { 
    position: absolute; 
    right: 10px; 
} 
.lightblue { 
    background: #4099FF; 
} 
.twitter { 
    position: absolute; 
    right: 10px; 
    font-size: 120px !important; 
} 
.orange { 
    background: #FF7F00; 
} 
.rss { 
    position: absolute; 
    right: 10px; 
    font-size: 100px !important; 
} 
.darkblue { 
    background: #31546f; 
} 
.tumblr { 
    position: absolute; 
    right: 10px; 
    font-size: 110px !important; 
} 
.vimeoblue { 
    background: #00adef; 
} 
.vimeo { 
    position: absolute; 
    right: 10px; 
} 
.flickrpink { 
    background: #FF0084; 
} 
.flickr { 
    position: absolute; 
    right: 10px; 
    top: -25px; 
} 
.picasapurple { 
    background: #9864ae; 
} 
.picasa { 
    position: absolute; 
    right: 10px; 
} 
.dribbblepink { 
    background: #c7386e; 
} 
.dribbble { 
    position: absolute; 
    right: 10px; 
} 
.forrstgreen { 
    background: #345129; 
} 
.forrst { 
    position: absolute; 
    right: 10px; 
    top: -35px; 
} 
.deviantartgreen { 
    background: #002e21; 
} 
.deviantart { 
    position: absolute; 
    right: 10px; 
    top: -10px; 
} 
.githubblue { 
    background: #4b6574; 
} 
.github { 
    position: absolute; 
    right: 10px; 
} 
.youtubered { 
    background: #cb0000; 
} 
.youtube { 
    position: absolute; 
    right: 10px; 
} 
.wordpressblue { 
    background: #1c4162; 
} 
.wordpress { 
    position: absolute; 
    right: 10px; 
} 
.bloggerorange { 
    background: #FF7F00; 
} 
.blogger { 
    position: absolute; 
    right: 10px; 
    top: -10px; 
} 
.amazonorange { 
    background: #e6940a; 
} 
.amazon { 
    position: absolute; 
    right: 10px; 
    top: -20px; 
} 
.applegrey { 
    background: #666; 
} 
.apple { 
    position: absolute; 
    right: 10px; 
} 
.androidgreen { 
    background: #a4c63b; 
} 
.android { 
    position: absolute; 
    right: 10px; 
} 
.skypeblue { 
    background: #00aff0; 
} 
.skype { 
    position: absolute; 
    right: 10px; 
} 
.pinterestred { 
    background: #cb2026; 
} 
.pinterest { 
    position: absolute; 
    right: 10px; 
} 
.xinggreen { 
    background: #005a5f; 
} 
.xing { 
    position: absolute; 
    right: 10px; 
} 
.lastfmred { 
    background: #d9004a; 
} 
.lastfm { 
    position: absolute; 
    right: 10px; 
} 
.info_txt { 
    display: inline-block; 
    position: absolute; 
    background: rgb(255,255,255); 
    background: url(data: image/svg+xml; 
    base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNGY0ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(244,244,244,1))); 
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%); 
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%); 
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%); 
    background: linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%); 
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 ); 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    top: -5px; 
    left: -5px; 
    padding: 10px 5px 5px 10px; 
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 1); 
    color: #666; 
    font-size: 11px; 
    text-shadow: 1px 1px 0px white; 
} 
.vbutton { 
    position: absolute; 
    top: 75px; 
    left: 5px; 
} 
.shine { 
    height: 100px; 
    overflow: hidden; 
    width: 320px; 
    position: relative; 
    background: url(data: image/svg+xml; 
    base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjQiLz4KICAgIDxzdG9wIG9mZnNldD0iNjklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); 
    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%); 
    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))); 
    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%);
    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%); 
    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%); 
    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%); 
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#66ffffff', endColorstr='#00000000',GradientType=0 ); 
} 
.icons { 
    font-family: 'IcoMoon'; 
    font-size: 134px; 
    color: rgba(255,255,255,1); 
    text-shadow: 2px 2px 0 rgba(0,0,0,0.2); 
    -webkit-transition: all .25s ease-in-out; 
    -moz-transition: all .25s ease-in-out; 
    -o-transition: all .25s ease-in-out; 
    -ms-transition: all .25s ease-in-out; 
    transition: all .25s ease-in-out; 
    cursor: pointer; 
} 
@font-face { 
    font-family: 'IcoMoon'; 
    src: url('http://www.mediumidee.de/fonts/IcoMoon.eot'); 
    src: url('http://www.mediumidee.de/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'),         
  url('http://www.mediumidee.de/fonts/IcoMoon.woff') format('woff'),         
  url('http://www.mediumidee.de/fonts/IcoMoon.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
/* Use the following CSS code if you want to use data attributes for inserting your icons */ 
[data-icon]:before { 
    font-family: 'IcoMoon'; 
    content: attr(data-icon); 
    speak: none; 
} 
/* Use the following CSS code if you want to have a class per icon */ 
[class^="icon-"]:before, [class*=" icon-"]:before { 
    font-family: 'IcoMoon'; 
    font-style: normal; 
    speak: none; 
} 
.icon-google-plus:before { 
    content: "\0061"; 
} 
.icon-facebook:before { 
    content: "\0062"; 
} 
.icon-twitter:before { 
    content: "\0063"; 
} 
.icon-twitter-2:before { 
    content: "\0064"; 
} 
.icon-feed:before { 
    content: "\0065"; 
} 
.icon-vimeo:before { 
    content: "\0066"; 
} 
.icon-flickr:before { 
    content: "\0067"; 
} 
.icon-picassa:before { 
    content: "\0068"; 
} 
.icon-dribbble:before { 
    content: "\0069"; 
} 
.icon-forrst:before { 
    content: "\006a"; 
} 
.icon-deviantart:before { 
    content: "\006b"; 
} 
.icon-github:before { 
    content: "\006c"; 
} 
.icon-github-2:before { 
    content: "\006d"; 
} 
.icon-youtube:before { 
    content: "\006e"; 
} 
.icon-wordpress:before { 
    content: "\006f"; 
} 
.icon-blogger:before { 
    content: "\0070"; 
} 
.icon-amazon:before { 
    content: "\0071"; 
} 
.icon-apple:before { 
    content: "\0072"; 
} 
.icon-android:before { 
    content: "\0073"; 
} 
.icon-skype:before { 
    content: "\0074"; 
} 
.icon-lastfm:before { 
    content: "\0075"; 
} 
.icon-pinterest:before { 
    content: "\0076"; 
} 
.icon-xing:before { 
    content: "\0077"; 
}

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

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.