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 tombol 3D dengan CSS di blog ini saya dapatkan dari Tuts+ dan bisa dibaca di 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

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

• Download
• Download
• Download
• Download
• Download
• Download
• Download
• Download

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

• Download
• Download
• Download
• Download
• Download
• Download
• Download
• Download

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 sobat untuk artikel ini, Membuat Tombol 3D dengan CSS di Blog