Cara Membuat Tombol Keren Pada Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Pada artikel kaliini saya akan membagikan "Cara Membuat Tombol Keren Pada Blogger".
Anda tentu membutuhkan tutorial ini, terutama bagi anda seorang Blogger yang blogging dibidang tutorial coding atau bagi anda yang blogging dibidang penyedia software atau aplikasi yang bisa didownload oleh pengunjung blog anda.
Pada template bawaan Blogger tidak dilengkapi dengan tombol keren karena template bawaan Blogger masih baku dan sangat sederhana, oleh karena itu anda harus berupaya membuat dan memasang sendiri pada template blog anda. Tetapi pada beberapa template premium atau template gratis yang anda download pada situs penyedia template Blogger, kadang dilengkapi dengan tombol keren walau dengan tampilan yang sangat sederhana hanya dengan hiasan warna dan border saja. Saya yakin bahwa anda merasa kurang puas dengan tombol yang dilengkapi pada template tersebut, oleh karena itu saya akan memberikan alternatif untuk anda para Blogger yang blogging dibidang tutorial coding atau bagi anda yang blogging dibidang penyedia software atau aplikasi.

Berikut adalah fitur pada tombol keren yang saya bagikan kepada anda pada kali ini:
1. Indah, dengan gaya warna dan animasi.
2. Ringan, hanya dibangkitkan dengan CSS dan HTML sehingga tidak memberatkan dan tidak mengganggu aktivitas blog.
3. Responsive pada tampilan perangkat Desktop, Tablet dan Mobile.
4. Mudah digunakan dengan HTML yang sederhana dan sangat ringan.

Sebelum ketutorial, alangkah baiknya jika anda melihat dahulu hasil berikut⇩

Result

Jika anda berminat, mari ke tutorial⇨
1. Letakkan CSS berikut diatas / sebelum tag ]]></b:skin>⇩

/***************************************
Cool Button By www.BloggerAutodidact.com
***************************************/
.whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebutton a {
    background: #fff;
    color: #00cc00;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Open Sans',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
}

.whitebutton a:before {
    content: '\f019';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebutton span {
    background: #009900;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Open Sans', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebutton .up {
    background: #006600;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down {
    margin: -30px auto;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down:before {
    content:'\f14a';
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 6px;
    color: #00e600;
}

.whitebutton:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

.whitebutton:hover .down {
    opacity: 1;
    transform: translate(0,-90px);
}

.whitebuttonresult {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebuttonresult a {
    background: #006600;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family:'Open Sans',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
    transition: 350ms;
}

.whitebuttonresult a:before {
    content:'\f002';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebuttonresult a:hover {
    color: #fff;
}

.whitebuttonresult span {
    background: #009900;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Open Sans', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebuttonresult .up {
    background: #009900;
    margin: -29px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebuttonresult:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

2. Gunakan HTML berikut kedalam postingan anda⇩

<div class="whitebuttonresult">
<a href="#" target="_blank">Result</a><br>
<span class="up">Click To View</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">Download</a><br>
<span class="up">Click To Download</span><br>
<span class="down">14.7MB .rar</span></div>

Catatan: Silakan ganti tanda # dengan link tujuan anda.

Alhamdulillaah, tutorial sudah siap.