◄ Min  Size Fonts: + | - | ± Color: ■ ■ ■ ■ Max ►
Home › › › › › › Make Social Media Icons With CSS3 3D

Make Social Media Icons With CSS3 3D

Follow This Blog
Sepertinya tutorial membuat sosial media icons dengan efek CSS3 animasi belum menggelitik nih! Biar lebih variasi gue tambahin tut's serupa ah :d Original title is Create 3D Social Media Buttons with CSS3. Membuat tombol berbagi (sosial) dengan efek 3D
Link berbagi sekarang akan meliputi 8 web jejaring yaitu: RSS, Twitter, Linkedin, Stumbleupon, Facebook, Google Plus, Flickr dan Pinterest. Berikut gambaran efek 3D dengan CSS
3D CSS Text
Dengan menambahkan atribut a:active maka akan terlihat kental efek 3 dimensinya ketika memencet ;)3D-Social-Media-Buttons-CSS3Markup HTML<div class="set-1">
<ul>
<li><a href="/" class="rss-small">RSS</a></li>
<li><a href="/" class="twitter-small">Twitter</a></li>
<li><a href="/" class="linkedin-small">Linkedin</a></li>
<li><a href="/" class="stumble-small">Stumbleupon</a></li>
<li><a href="/" class="facebook-small">Facebook</a></li>
<li><a href="/" class="gplus-small">GPlus</a></li>
<li><a href="/" class="flickr-small">Flickr</a></li>
<li><a href="/" class="pinterest-small">Pinterest</a></li>
</ul>
</div>Kode CSS
.set-1 ul li {
  display: inline-block;
  margin: 5px 0 0 3px;
}
.set-1 a {
  position: relative;
  display: block;
  width: 60px;
  height: 54px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  color: transparent;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;

}
.set-1 a:active {
  -webkit-transform: translate(0,3px);
  transform: translate(0,3px);
}
a.twitter-small {
  -webkit-box-shadow: 0 6px 0 #2695BC;
  box-shadow: 0 6px 0 #2695BC;
}
a.twitter-small {
  background: #2CA9E1 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/twitter.png") no-repeat center center;
}
a.twitter-small:active {
  -webkit-box-shadow: 0 2px 0 #2695BC;
  box-shadow: 0 2px 0 #2695BC;
}
a.facebook-small {
  -webkit-box-shadow: 0 6px 0 #293F63;
  box-shadow: 0 6px 0 #293F63;
}
a.facebook-small {
  background: #3B5997 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/facebook.png") no-repeat center center;
}
a.facebook-small:active {
  -webkit-box-shadow: 0 2px 0 #293F63;
  box-shadow: 0 2px 0 #293F63;
}
a.pinterest-small {
  -webkit-box-shadow: 0 6px 0 #8C151B;
  box-shadow: 0 6px 0 #8C151B;
}
a.pinterest-small {
  background: #CD1D1F url("http://flashuser.net/tutorial/css3-social-media-buttons/images/pinterest.png") no-repeat center center;
}
a.pinterest-small:active {
  -webkit-box-shadow: 0 2px 0 #8C151B;
  box-shadow: 0 2px 0 #8C151B;
}
a.gplus-small {
  -webkit-box-shadow: 0 6px 0 #141412;
  box-shadow: 0 6px 0 #141412;
  position: relative;
}
a.gplus-small {
  background: #353631 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/gplus.png") no-repeat center center;
}
a.gplus-small:active {
  -webkit-box-shadow: 0 2px 0 #141412;
  box-shadow: 0 2px 0 #141412;
}
a.rss-small {
  -webkit-box-shadow: 0 6px 0 #C64802;
  box-shadow: 0 6px 0 #C64802;
}
a.rss-small {
  background: #FF6501 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/rss.png") no-repeat center center;
}
a.rss-small:active {
  -webkit-box-shadow: 0 2px 0 #C64802;
  box-shadow: 0 2px 0 #C64802;
}
a.linkedin-small {
  -webkit-box-shadow: 0 6px 0 #005377;
  box-shadow: 0 6px 0 #005377;
}
a.linkedin-small {
  background: #0073B2 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/linkedin.png") no-repeat center center;
}
a.linkedin-small:active {
  -webkit-box-shadow: 0 2px 0 #005377;
  box-shadow: 0 2px 0 #005377;
}
a.stumble-small {
  -webkit-box-shadow: 0 6px 0 #B7371D;
  box-shadow: 0 6px 0 #B7371D;
}
a.stumble-small {
  background: #EA4B24 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/stumble.png") no-repeat center center;
}
a.stumble-small:active {
  -webkit-box-shadow: 0 2px 0 #B7371D;
  box-shadow: 0 2px 0 #B7371D;
}
a.flickr-small {
  -webkit-box-shadow: 0 6px 0 #C10E78;
  box-shadow: 0 6px 0 #C10E78;
}
a.flickr-small {
  background: #FC1090 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/flickr.png") no-repeat center center;
}
a.flickr-small:active {
  -webkit-box-shadow: 0 2px 0 #C10E78;
  box-shadow: 0 2px 0 #C10E78;
}
Itu baru gaya pertama, sekarang gaya yang kedua :d3D-Social-Media-Buttons-CSS3Markup HTML<div class="set-2">
<ul>
<li><a href="/" class="rss-big">RSS</a></li>
<li><a href="/" class="twitter-big">Twitter</a></li>
<li><a href="/" class="linkedin-big">Linkedin</a></li>
<li><a href="/" class="stumble-big">Stumbleupon</a></li>
<li><a href="/" class="facebook-big">Facebook</a></li>
<li><a href="/" class="gplus-big">GPlus</a></li>
<li><a href="/" class="flickr-big">Flickr</a></li>
<li><a href="/" class="pinterest-big">Pinterest</a></li>
</ul>
</div>Kode CSS
.set-2 ul li {
  display: inline-block;
  margin: 10px 0 0 3px;
}
.set-2 a:active {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
}
.set-2 a {
  position: relative;
  color: #ffffff;
  text-decoration: none;
  font-family: 'Oswald';
  display: block;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font-size: 16px;
  padding: 11px 15px 10px 45px;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
a.twitter-big {
  -webkit-box-shadow: 0 6px 0 #2695BC;
  box-shadow: 0 6px 0 #2695BC;
}
a.twitter-big {
  background: #2CA9E1;
}
a.twitter-big:active {
  -webkit-box-shadow: 0 2px 0 #2695BC;
  box-shadow: 0 2px 0 #2695BC;
}
a.twitter-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/twitter.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.facebook-big {
  -webkit-box-shadow: 0 6px 0 #293F63;
  box-shadow: 0 6px 0 #293F63;
}
a.facebook-big {
  background: #3B5997;
}
a.facebook-big:active {
  -webkit-box-shadow: 0 2px 0 #293F63;
  box-shadow: 0 2px 0 #293F63;
}
a.facebook-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/facebook.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.pinterest-big {
  -webkit-box-shadow: 0 6px 0 #8C151B;
  box-shadow: 0 6px 0 #8C151B;
}
a.pinterest-big {
  background: #CD1D1F;
}
a.pinterest-big:active {
  -webkit-box-shadow: 0 2px 0 #8C151B;
  box-shadow: 0 2px 0 #8C151B;
}
a.pinterest-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/pinterest.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.gplus-big {
  -webkit-box-shadow: 0 6px 0 #141412;
  box-shadow: 0 6px 0 #141412;
  position: relative;
}
a.gplus-big {
  background: #353631;
}
a.gplus-big:active {
  -webkit-box-shadow: 0 2px 0 #141412;
  box-shadow: 0 2px 0 #141412;
}
a.gplus-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/gplus.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.rss-big {
  -webkit-box-shadow: 0 6px 0 #C64802;
  box-shadow: 0 6px 0 #C64802;
}
a.rss-big {
  background: #FF6501;
}
a.rss-big:active {
  -webkit-box-shadow: 0 2px 0 #C64802;
  box-shadow: 0 2px 0 #C64802;
}
a.rss-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/rss.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.linkedin-big {
  -webkit-box-shadow: 0 6px 0 #005377;
  box-shadow: 0 6px 0 #005377;
}
a.linkedin-big {
  background: #0073B2;
}
a.linkedin-big:active {
  -webkit-box-shadow: 0 2px 0 #005377;
  box-shadow: 0 2px 0 #005377;
}
a.linkedin-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/linkedin.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.stumble-big {
  -webkit-box-shadow: 0 6px 0 #B7371D;
  box-shadow: 0 6px 0 #B7371D;
}
a.stumble-big {
  background: #EA4B24;
}
a.stumble-big:active {
  -webkit-box-shadow: 0 2px 0 #B7371D;
  box-shadow: 0 2px 0 #B7371D;
}
a.stumble-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/stumble.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.flickr-big {
  -webkit-box-shadow: 0 6px 0 #C10E78;
  box-shadow: 0 6px 0 #C10E78;
}
a.flickr-big {
  background: #FC1090;
}
a.flickr-big:active {
  -webkit-box-shadow: 0 2px 0 #C10E78;
  box-shadow: 0 2px 0 #C10E78;
}
a.flickr-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/flickr.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
Perhatian!
Gantikan link image dengan link gambar hostingan kalian sendiri guna keamanan & kenyamanan ;) Demo and resource by
Satu lagi tuts sosial media dengan gaya bergulir by D-Copy Blog
Happy coding \m/
Loading...
XMake Social Media Icons With CSS3 3D
Membuat link sosial/berbagi dengan efek 3D CSS3 plus bonus tuts serupa dengan efek bergulir
Subscribe my posts Register For Free!
, , , , ✎

4 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE