Kamis, 06 Februari 2014

Membuat Tombol 3D dengan CSS di Blog

Membuat Tombol 3D dengan CSS di Blog - Pada beberapa artikel sebelumnya, saya telah membahas tentang efek-efek tiga dimensi yang bisa di pasang kedalam blog ataupun artikel blog. Jika sebelumnya hanya membahas sebatas pada teks dan tombol sederhana, pada artikel kali ini saya akan menjelaskan tentang membuat tombol 3D dengan CSS

Untuk artikel yang berhubungan dengan artikel membuat tombol 3D ini silahkan baca juga:
Membuat button 3D sederhana
Membuat teks 3D di blog

Membuat Tombol 3D dengan CSS di Blog

Membuat tombol 3D dengan CSS di blog ini saya dapatkan dari Tuts+ dan bisa dibaca di Orman Clark's Chunky 3D Web Buttons: The CSS3 Version dan pada panduan yang saya tulis ini memang ada sedikit perbedaan dari CSS aslinya. Jika ingin membandingkan, berikut hasil jadi yang telah sedikit saya tambahkan dengan icons, dan kebetulan saya membuat tombol ini dengan nama aslinya juga yaitu tombol download. Saya hanya menambahkan icons download dengan menggunakan icon font awesome

Berikut tampilan tombol 3D dengan CSS versi dengan penambahan icons font awesome

Cara membuat tombol 3D dengan CSS di Blog
Kode css tombol ini adalah kode dasar yang harus dipasang kedalam template blog
Salin kode CSS berikut kedalam template sebelum kode ]]></b:skin> atau </style>
a.button {
    float: left;
    position: relative;
    height: 25px;
    width: 80px;
    margin: 0 10px 18px 0;
    text-align: center;
    
    text-decoration: none;
    font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    line-height: 25px;
        
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
    border-radius: 3px;
}
a.button:before { 
    content:"\f01a";
    height: 23px;
    bottom: -4px;
    border-top: 0;
    font-family: FontAwesome;
    vertical-align:middle;
    text-decoration: none;
    text-shadow: none;
}
a.button:active {
    border: none;
    bottom: -4px;
    margin-bottom: 22px;
    -webkit-box-shadow: 0 1px 1px #fff;
    -moz-box-shadow:  0 1px 1px #fff;
    box-shadow:  1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3);
  }
a.button:active:before,
a.button:active:after {
    border: none; 
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
Salin kode warna setelah kode tombol diatas
a.pink,
  a.pink:hover,
  a.pink:visited {
    color: #913944;
    border-bottom: 4px solid #cb5462;
    text-shadow: 0px 1px 0px #f9a0ad;
    
    background: #f56778;
    background: -webkit-gradient(linear, left top, left bottom, from(#f997b0), to(#f56778));
    background: -moz-linear-gradient(top,  #f997b0,  #f56778);
}
  a.pink:hover {
    background: #f56778;
    background: -webkit-gradient(linear, left top, left bottom, from(#f56778), to(#f997b0));
    background: -moz-linear-gradient(top,  #f56778,  #f997b0);
  }
Salin kode warna setelah kode tombol diatas
a.blue,
a.blue:hover,
a.blue:visited {
    color: #42788e;
    border-bottom: 4px solid #589cb6;
    background: #abe4f8;
    
    text-shadow: 0px 1px 0px #bee9fa;
    background: -webkit-gradient(linear, left top, left bottom, from(#abe4f8), to(#74d0f4));
    background: -moz-linear-gradient(top,  #abe4f8,  #74d0f4);
}
a.blue:hover {
    background: #74d0f4;
    background: -webkit-gradient(linear, left top, left bottom, from(#74d0f4), to(#abe4f8));
    background: -moz-linear-gradient(top,  #74d0f4,  #abe4f8);
}
Salin kode warna setelah kode tombol diatas
a.green,
  a.green:hover,
  a.green:visited {
    color: #5d7731;
    border-bottom: 4px solid #799545;
    text-shadow: 0px 1px 0px #d5e8aa;
    
    background: #cae285;
    background: -webkit-gradient(linear, left top, left bottom, from(#cae285), to(#a3cd5a));
    background: -moz-linear-gradient(top,  #cae285,  #a3cd5a);
}
  a.green:hover {
    background: #a3cd5a;
    background: -webkit-gradient(linear, left top, left bottom, from(#a3cd5a), to(#cae285));
    background: -moz-linear-gradient(top,  #a3cd5a,  #cae285);
  }
Salin kode warna setelah kode tombol diatas
a.turquoise,
  a.turquoise:hover,
  a.turquoise:visited {
    color: #437b7d;
    border-bottom: 4px solid #4fa7aa;
    text-shadow: 0px 1px 0px #9fd5d7;
    
    background: #81e8eb;
    background: -webkit-gradient(linear, left top, left bottom, from(#b7f2f4), to(#81e8eb));
    background: -moz-linear-gradient(top,  #b7f2f4,  #81e8eb);
}
  a.turquoise:hover {
    background: #81e8eb;
    background: -webkit-gradient(linear, left top, left bottom, from(#81e8eb), to(#b7f2f4));
    background: -moz-linear-gradient(top,  #81e8eb,  #b7f2f4);
  }
Salin kode warna setelah kode tombol diatas
a.darkgray,
  a.darkgray:hover,
  a.darkgray:visited {
    color: #555;
    border-bottom: 4px solid #878787;
    text-shadow: 0px 1px 0px #d6d6d6;
    
    background: #d1d1d1;
    background: -webkit-gradient(linear, left top, left bottom, from(#d1d1d1), to(#afafaf));
    background: -moz-linear-gradient(top,  #d1d1d1,  #afafaf);
}
  a.darkgray:hover {
    background: #afafaf;
    background: -webkit-gradient(linear, left top, left bottom, from(#afafaf), to(#d1d1d1));
    background: -moz-linear-gradient(top,  #afafaf,  #d1d1d1);
  }
Salin kode warna setelah kode tombol diatas
a.yellow,
  a.yellow:hover,
  a.yellow:visited {
    color: #996633;
    border-bottom: 4px solid #b98a37;
    text-shadow: 0px 1px 0px #fedd9b;
    
    background: #feda71;
    background: -webkit-gradient(linear, left top, left bottom, from(#feda71), to(#febe4d));
    background: -moz-linear-gradient(top,  #feda71,  #febe4d);
}
  a.yellow:hover {
    background: #febe4d;
    background: -webkit-gradient(linear, left top, left bottom, from(#febe4d), to(#feda71));
    background: -moz-linear-gradient(top,  #febe4d,  #feda71);
  }
Salin kode warna setelah kode tombol diatas
a.purple,
  a.purple:hover,
  a.purple:visited {
    color: #7b5777;
    border-bottom: 4px solid #946890;
    text-shadow: 0px 1px 0px #eacae6;
    
    background: #e8c4e4;
    background: -webkit-gradient(linear, left top, left bottom, from(#e8c4e4), to(#d698d0));
    background: -moz-linear-gradient(top,  #e8c4e4,  #d698d0);
}
  a.purple:hover {
    background: #d698d0;
    background: -webkit-gradient(linear, left top, left bottom, from(#d698d0), to(#e8c4e4));
    background: -moz-linear-gradient(top,  #d698d0,  #e8c4e4);
  }
Salin kode warna setelah kode tombol diatas
a.darkblue,
  a.darkblue:hover,
  a.darkblue:visited {
    color: #515f6a;
    border-bottom: 4px solid #62727e;
    text-shadow: 0px 1px 0px #c4d0da;
    
    background: #becbd6;
    background: -webkit-gradient(linear, left top, left bottom, from(#becbd6), to(#8da5b7));
    background: -moz-linear-gradient(top,  #becbd6,  #8da5b7);
}
  a.darkblue:hover {
    background: #8da5b7;
    background: -webkit-gradient(linear, left top, left bottom, from(#8da5b7), to(#becbd6));
    background: -moz-linear-gradient(top,  #8da5b7,  #becbd6);
  }
Kode HTML ini merupakan kode pemanggil dari tombol 3D dan kode warna diatas
Silahkan salin kode berikut kedalam artikel blog, dan sebagai contohnya, saya ingin menggunakan tombol 3D diatas denag warna kuning, maka kode HTML yang ditulis adalah sebagai berikut
<a href="#" class="button3d yellow">Download</a>

* Pilih salah satu CSS warna yang akan digunakan sebagai tombol

Berikut tampilan tombol 3D dengan CSS versi dengan penambahan icons dengan menggunakan fungsi :after

Jika tidak ingin memasang icons font awesome, bisa dilakukan dengan menggunakan fungsi :after pada CSS, dan berikut kode CSS tombol 3D dengan menggunakan fungsi :after pada CSS
Silahkan salin kode berikut setelah
a.button {
    float: left;
    position: relative;
    height: 25px;
    width: 80px;
    margin: 0 10px 18px 0;
    text-align: center;
    
    text-decoration: none;
    font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    line-height: 25px;
        
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
    border-radius: 3px;
}
a.button:after{
    content:"";width:0px;
    height:0px;
    border-width:4px;
    border-style:solid;
    border-color:#fff transparent transparent transparent;
    position:absolute;
    top:25px;
    right:5px;
}
a.button:active {
    border: none;
    bottom: -4px;
    margin-bottom: 22px;
    -webkit-box-shadow: 0 1px 1px #fff;
    -moz-box-shadow:  0 1px 1px #fff;
    box-shadow:  1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3);
  }
a.button:active:before,
a.button:active:after {
    border: none; 
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

Kalau dibaca secara langsung memang terlihat rumit karena banyaknya kode yang dilihat, namun jika diterapkan langsung, saya rasa cukup mudah karena hanya menggunakan kode CSS saja tapa menggunakan script/jQuery. Sealin itu, kode tombol 3D dengan cssloading blog

Okey, semoga artikel membuat tombol 3D dengan css di blog ini bisa memberikan manfaat dan bisa memperindah tampilan blog seperti blog ini :) Jika ada yang mau didiskusikan, silahkan tinggalkan komentar Anda untuk artikel ini, Membuat Tombol 3D dengan CSS di Blog

Membuat Tombol 3D dengan CSS di Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

7 komentar:

  1. mantab deh kalau tutorial dari panduan template emang jos

    BalasHapus
  2. ijin download kak salam kenal semoga makin sukses kunbal y

    BalasHapus
    Balasan
    1. silahkan mas Hendri, semoga bermanfaat.. kunbal Oke.. :)

      Hapus
  3. wah mantab mbak TOMBOL 3D DENGAN CSS-nya
    ijin praktek - ya
    salam blogwalking

    BalasHapus
  4. wah mantab mbak TOMBOL 3D DENGAN CSS-nya
    ijin praktek - ya
    salam blogwalking

    BalasHapus
  5. ijin make Mba..keren..tombol nya...!

    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