Trik Membuat Button lebih bergaya

Demo Download

Trik Membuat Button lebih bergaya (css tricks) seperti diatas ini sangat sederhana, hanya dengan menggunakan kode CSS/HTML, seperti halnya trik membuat kode postingan.

Button ini dapat anda gunakan untuk link yang dituju, seperti demo atau download.

Tahapan pembuatan Button tersebut berikut ini:

1. Masuk ke edit HTML
2. Masukkan kode CSS berikut (sebelum ]]></b:skin>) :

/* button*/

.button {
background: #B13E2C url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKNoyKpo5M-2rDJmHXm7egko6oT2jc_KcI40VwURSLs7CscpQj9YnfeVhfEWSGPS4cBKtfFlYgs8EGonv13OUzlPNQ1rdJYpbjrl1tuiPATcXAeZb_CamZzFNpoMCBRPUmXswzG4O3-Sk/) top left repeat-x; color: white !important; font-weight: bold; font-size: 15px; -moz-border-radius: 16px; border: none;
letter-spacing: -1px; padding: 5px 12px 3px 12px; -webkit-border-radius: 16px; }

.button:hover {
background: #2e2e2e; cursor: pointer; }

3. Save template
4. Masuk ke buat postingan atau widgate anda.
5. Kemudian masukan kode HTML berikut:

<a class="button" href="link tujuan">Demo</a> <a class="button" href="link tujuan">Download</a>

6. Selesai.

Posted in: Tutorial