Cara Membuat CSS Tombol DEMO dengan Pseudo Elements

CSS DEMO Button. Berikut ini kembali lagi anisuka akan membagikan cara membuat tombol demo dengan CSS tanpa jquery. Ini adalah kali ketiga anisuka membagikan tutorial blog tentang cara membuat tombol demo, sobat dapat membaca artikel sebelumnya yang seperti ini yaitu tombol download dan demo dengan efek slide dan juga membuat tombol dan halaman demo seperti yang digunakan oleh Btemplates dan zoom template.

Kegunaan membuat tombol seperti ini adalah untuk mempercantik tapilan postingan mungkin juga agar tulisan lebih terlihat profesional..hehehe, dari pada hanya sekedar tulisan “demo” saja maka tulisan “Demo” di beri variasi dan efek.

Untuk melihat bagaimana tampilan tombol ini / Demonya silahkan masuk DISINI.

Lihat juga Demo Download Button Efek Slide Keren yang lain. Bagaimana bro? tertarik ingin menggunakannya? Ok berikut ini adalah cara membuat tombol seperti tadi.

1. Di blogger anda.
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin>
4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin>

.a_anisuka_four { background-color:#4b3f39; 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 0 1px 0 #9e8d84,0px 5px 0 0 #322620,0px 10px 5px #999; }
.a_anisuka_four:active { top:3px; background-image:linear-gradient(bottom,rgb(62,51,46) 100%,rgb(101,86,78) 0%); box-shadow:inset 0 1px 0 #9e8d84,0px 2px 0 0 #322620,0px 5px 3px #999; }
.a_anisuka_four::before { background-color:#322620; background-image:url(https://3.bp.blogspot.com/-aNUSc_J8xzA/VCYouG_jX-I/AAAAAAAACLc/TRqe-iK7OTU/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 0 1px 0 #19120f,0px 1px 0 #827066; }
.a_anisuka_four:active::before { top:50%; margin-top:-12px; box-shadow:inset 0 1px 0 #827066,0px 3px 0 #19120f,0px 6px 3px #382e29; }

5. Untuk membuatnya tampil dihalaman postingan, dalam membuat postingan dalam mode HTML masukan gunakan kode seperti contoh dibawah ini.

<div style=”text-align: center;”>
<a class=”a_anisuka_four” href=”https://simplecips.blogspot.com/” target=”_blank”>
     DEMONYA BRO
</a>
</div>

6. Publikasikan artikel anda dan lihat hasilnya.

Ok sobat sekian artikel untuk saat ini, dan jangan lupa lihat artikel terbaru anisuka yang lainnya. Semoga “Cara Membuat CSS Tombol DEMO dengan Pseudo Elements” ini bermanfaat untuk anda.

Diposkan oleh

Brando Mewo

You Might Also Like: