Membuat CSS Tombol DEMO dengan Pseudo Elements

Sebelumnya saya telah mengulas cara membuat style tombol demo dan download, kali ini saya akan membagikkan membuat tombol demo dengan css tanpa jQuery. Tombol demo dibuat sedekemian rupa hal ini dilakukan agar mempercantik tampilan postingan dengan diberi variasi dan efek.

DEMO

Bagi anda yang tertarik, berikut ini cara Membuat CSS Tombol DEMO dengan Pseudo Elements

1. Login keakun Blogger
2. Pilih Template => Edit HTML
3. Selanjutnya anda cari kode ]]></b:skin>
4. Kemudian anda letakkan script CSS dibawah ini diatasnya

.a_aak_four {
    background-color:#13115C;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    position:relative;
    padding:10px 20px;
    padding-right:50px;
    background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
    border-radius: 5px;
    box-shadow: inset 0px 1px 0px #CDCDCD, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}
.a_aak_four:active {
    top:3px;
    background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
    box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}
.a_aak_four::before {
    background-color:#322620;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF21UBv_9NCCAv92GLjagONgz1OyEEGAPIcxZYdw4WJk0D4C9j3-9vbv1ENc0tFKEf5JOusskcDeu31hDCOVStSZC4A6NTq3D8o31xMA3Iwb0DA4t-GloJtArzzNYwyyCrb7Qi5nBzooz5/s20/Glossy_3d_blue_arrow_right.png);
    background-repeat:no-repeat;
    background-position:center center;
    content:"";
    width:20px;
    height:20px;
    position:absolute;
    right:15px;
    top:50%;
    margin-top:-9px;
    border-radius: 50%;
    box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}
.a_aak_four:active::before {
    top:50%;
    margin-top:-12px;
    box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

5. Simpan Template

6. Untuk membuat tampil dipostingan halaman diperlukan kode pemaggil. Anda menuju laman baru dalam mode HTML kemudian gunakan kode dibawah ini letakkan di dalamnya :

<div style="text-align: center;">
<a class="a_aak_four" href="http://aak-share.blogspot.com/" target="_blank">
     DEMO
</a>
</div>

6. Publikasikan dan anda lihat hasilnya

Sekian dulu dari saya Membuat CSS Tombol DEMO dengan Pseudo Elements, jangan lewatkan artikel aak lainnya, semoga bermanfaat!

Bagikan Artikel ini