Minggu, 09 Februari 2014

Membuat Tombol CSS Sosial Media 3D

Membuat Tombol CSS Sosial Media 3D - Melengkapi artikel sebelumnya tentang tombol 3 dimensi atau button 3D, mungkin artikel ini adalah artikel terakhir yang membahas tentang tombol css 3D dan menjadi target utama pada artikel ini adalah membuat tombol css sosial media 3 dimensi (3D). Jika sebelumnya saya telah membahas berbagai macam tombol 3D yang bisa dipasang di blog atau artikel blog, maka artikel ini khusus untuk tombol sosial media

Membuat Tombol CSS Sosial Media 3D

Untuk beberapa artikel sebelumnya, disarankan Anda untuk membaca yaitu :
Membuat tombol 3D animasi
Membuat tombol 3D
Membuat tombol 3D sederhana
Membuat teks 3D
Dan jika sudah membaca artikel tersebut, mari kita bahas tentang tombol sosial media 3 dimensi ini..

Untuk membuat tombol sosial media ini, saya tidak menyertakan icons font awesome sebagai icon tiap masing-masing tombol dari setiap sosial media, meskipun didalam icon font awesome sudah terdapat beberapa font icons sosial media. Kenapa saya tidak menggunakan icon font tersebut? Karena untuk mengurangi penggunaan kode CSS yang terlalu banyak
Sebagai gantinya, saya menggunakan gambar untuk tiap-tiap icon sosial media dengan ukuran yang sangat kecil yaitu sekitar 1KB :)

Dalam membuat tombol sosial 3 dimensi ini saya membuatnya menjadi 2 bentuk tombol yaitu tombol kecil yang hanya menampilkan icon sosial medianya dan tombol besar yang dilengkapi nama sosial media tersebut atau seperti yang terlihat pada demo berikut ini

Real DEMO

Tombol Kecil
Tombol Besar

Cara Membuat Tombol CSS Sosial Media 3D
Setelah melihat tampilan demo diatas tentu ada sebagian teman-teman blogger semua ingin membuat dan menampilkan tombol sosial media 3D tersebut. Dan berikut caranya..

Penggunaan Font
Untuk tombol sosial media yang besar diatas, font yang digunakan adalah Oswald. Namun terserah Anda, jika ingin menggunakan font tersebut, silahkan pasang kode fontnya berikut ini didalam kode template sebelum kode </head> dan jika tidak ingin menggunakan font tersebut, jangan pasang kodenya

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Pemasangan Kode CSS Untuk Tombol Sosial Media 3D
Untuk tiap-tiap kode css dari sosial media, saya menggunakan tiga sosial media yang biasa digunakan yaitu Google Plus, Facebook, dan Twitter serta feed untuk blog yaitu RSS.
Untuk sosial media lainnya, silahkan gunakan dan modifikasi sendiri dari tiap-tiap kode css untuk google plus, facebook, twitter, dan rss

Kode CSS Google+

a.gplus-small,a.gplus-big {-webkit-box-shadow:0px 6px 0px #8C151B;-moz-box-shadow:0px 6px 0px #8C151B;box-shadow:0px 6px 0px #8C151B;position:relative;}
a.gplus-small{background:#dd4b39 url("http://4.bp.blogspot.com/-ahjChKs02Vk/UvdxAcTpsiI/AAAAAAAACf0/vlGk7vo8JCA/s1600/panduantemplateblogCom_gplus.png") no-repeat center center;}
a.gplus-big{background:#dd4b39;}
a.gplus-small:active,a.gplus-big:active{-webkit-box-shadow:0px 2px 0px #8C151B;-moz-box-shadow:0px 2px 0px #8C151B;box-shadow:0px 2px 0px #8C151B;}
a.gplus-big:before{background:url("http://4.bp.blogspot.com/-ahjChKs02Vk/UvdxAcTpsiI/AAAAAAAACf0/vlGk7vo8JCA/s1600/panduantemplateblogCom_gplus.png") no-repeat center center;content:"";width:30px;height:30px;position:absolute;left:10px;top:18%;}

Kode CSS Facebook

a.facebook-small,a.facebook-big{-webkit-box-shadow:0px 6px 0px #293F63;-moz-box-shadow:0px 6px 0px #293F63;box-shadow:0px 6px 0px #293F63;}
a.facebook-small{background:#3B5997 url("http://2.bp.blogspot.com/-xn6N3zjHEQg/Uvdw_bwoCcI/AAAAAAAACfk/j0gDWEc0AjM/s1600/panduantemplateblogCom_facebook.png") no-repeat center center;}
a.facebook-big{background:#3B5997;}
a.facebook-small:active,a.facebook-big:active{-webkit-box-shadow:0px 2px 0px #293F63;-moz-box-shadow:0px 2px 0px #293F63;box-shadow:0px 2px 0px #293F63;}
a.facebook-big:before{background:url("http://2.bp.blogspot.com/-xn6N3zjHEQg/Uvdw_bwoCcI/AAAAAAAACfk/j0gDWEc0AjM/s1600/panduantemplateblogCom_facebook.png") no-repeat center center;content:"";width:30px;height:30px;position:absolute;left:10px;top:18%;}

Kode CSS Twitter

a.twitter-small,a.twitter-big{-webkit-box-shadow:0px 6px 0px #2695BC;-moz-box-shadow:0px 6px 0px #2695BC;box-shadow:0px 6px 0px #2695BC;}
a.twitter-small{background:#2CA9E1 url("http://4.bp.blogspot.com/-S2uYbX_ZL4A/UvdxB8CBbUI/AAAAAAAACgU/AOFxpkg8sK8/s1600/panduantemplateblogCom_twitter.png") no-repeat center center;}
a.twitter-big{background:#2CA9E1;}
a.twitter-small:active,a.twitter-big:active{-webkit-box-shadow:0px 2px 0px #2695BC;-moz-box-shadow:0px 2px 0px #2695BC;box-shadow:0px 2px 0px #2695BC;}
a.twitter-big:before{background:url("http://4.bp.blogspot.com/-S2uYbX_ZL4A/UvdxB8CBbUI/AAAAAAAACgU/AOFxpkg8sK8/s1600/panduantemplateblogCom_twitter.png") no-repeat center center;content:"";width:30px;height:30px;position:absolute;left:10px;top:18%;}

Kode CSS RSS

a.rss-small,a.rss-big{-webkit-box-shadow:0px 6px 0px #C64802;-moz-box-shadow:0px 6px 0px #C64802;box-shadow:0px 6px 0px #C64802;}
a.rss-small{background:#FF6501 url("http://1.bp.blogspot.com/-nf3oSJ8f4m4/UvdxBlrayII/AAAAAAAACgM/i8M-yvWyoHA/s1600/panduantemplateblogCom_rss.png") no-repeat center center;}
a.rss-big{background:#FF6501;}
a.rss-small:active,a.rss-big:active{-webkit-box-shadow:0px 2px 0px #C64802;-moz-box-shadow:0px 2px 0px #C64802;box-shadow:0px 2px 0px #C64802;}
a.rss-big:before{background:url("http://1.bp.blogspot.com/-nf3oSJ8f4m4/UvdxBlrayII/AAAAAAAACgM/i8M-yvWyoHA/s1600/panduantemplateblogCom_rss.png") no-repeat center center;content:"";width:30px;height:30px;position:absolute;left:10px;top:18%;}

Untuk pemanggilan kode css tombol sosial agar terbentuk seperti demo diatas, silahkan gunakan kode berikut dan salin kedalam template atau didalam artikel blog Anda

Markup Tombol Kecil
<a class="gplus-small" href="#">GPlus</a>
<a class="facebook-small" href="#">Facebook</a>
<a class="twitter-small" href="#">Twitter</a>
<a class="rss-small" href="#">RSS</a>

Markup Tombol Besar
<a class="gplus-big" href="#">GPlus</a>
<a class="facebook-big" href="#">Facebook</a>
<a class="twitter-big" href="#">Twitter</a>
<a class="rss-big" href="#">RSS</a>

Bagaimana mudah bukan untuk membuat tombol 3D untuk sosial media diatas? Mudah dong.. Dan sekali lagi jika ingin membuat tombol sosial media lainnya seperti Linkedin, Stumbleupon, Pinterest, Flickr, Vimeo dan sebagainya, cukup melakukan modifikasi terhadap kode CSS dari ketiga sosial media diatas atau yang ada di artikel ini

Okey, semoga artikel tentang membuat tombol css sosial media 3D ini memeberikan manfaat untuk kita semua

Membuat Tombol CSS Sosial Media 3D Rating: 4.5 Diposkan Oleh: ana sriwahyuni

8 komentar:

  1. Keren-keren mbak tombolnya :-bd cocok untuk blog bertemakan flat ui

    BalasHapus
    Balasan
    1. terimakasih mas Adhy atas kunjungan serta koemntarnya.. iya mas, semoga artikel di blog ini bisa memberikan manfaat buat yang lainnya :)

      Hapus
    2. iya mbak ini emang cocok untuk flat ui bikin theme nya aja mbak sekalian

      Hapus
    3. untuk themenya mungkin saya akan membuatnya lagi tapi tidak untuk saat ini mas :)

      Hapus
  2. menarik sekali tombolnya, boleh dicoba nih :D

    BalasHapus
  3. Wah infonya sangat bermanfaat sekali gan. izin nyimak ya gan dan jangan lupa update terus artikelnya. Oh iya sob, kapan-kapan saya akan mampir lagi jika ada waktu luang. hehehehehe. jangan lupa di update terus ya blognya. salam kenal.
    Cara Menggunakan Template Flat Ui
    Thanks.

    BalasHapus
  4. wah ada artikel bagus nih , lanjutkan mbak

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia