Skip to main content
Website Mini

follow us

Membuat Tombol Demo Dan Download Dengan Icon SVG

Membuat Tombol Demo Dan Download Dengan Menggunakan Icon SVG, memuat tombol demo dan download keren dengan ikon SVG

Membuat Tombol Demo Dan Download Dengan Icon SVG - Pada waktu yang lalau Saya sudah membagikan tutorial cara membuat tombol download di template idntheme. Untuk kesempatan kali ini Saya akan coba posting Membuat Tombol Demo Dan Download Dengan Icon SVG.

Sebenarnya postingan membuat tombol demo dan download dengan icon sudah banyak yang share, tapi biasanya menggunakan icon Awesome. Jadi untuk itu saya akan mencobanya dengan menggunakan icon SVG, karena icon SVG tidak membuat loading blog menjadi berat.

Untuk demonya seperti pada gambar dibawah ini.

Nah, jika Anda ingin mencobaya, silahkan ikuti caranya berikut ini.

Membuat Tombol Demo dan Download dengan Icon SVG

Langkah Pertama.

Simpan CSS dan Icon SVG dibawah ini di style template Anda.


.btn{position:relative;padding:6px 12px;margin-bottom:5px;font-size:16px;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;display:inline-block;
}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0;
}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
}

.btn-download,.btn-demo{color:#e8f5fd;background:#5498c9;border-bottom:2px solid #4679a0;padding-left:35px;
}
.btn-download:hover,.btn-demo:hover{background:#4289bc;color:#fff;
}

.btn-demo::before,.btn-download::before{content:'';height:24px;position:absolute;top:50%;transform:translateY(-50%);width:24px;left:6px;
}
.btn-download::before{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' width='22' height='22' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%233e6c90' d='M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;
}
.btn-demo::before{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%233e6c90' d='M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;
}

Langkah Kedua.

Jika sudah, kemudian untuk membuat tombol demo dan download di postingan, gunakan html berikut ini.


<a class="btn btn-demo" href="https://www.websitemini.net" title="Demo">Demo</a>

<a class="btn btn-download" href="https://www.websitemini.net" title="Download">Download</a>

Ganti url https://www.websitemini.net dengan url atau link Demo dan Download Anda

Semoga bermanfaat.

You Might Also Like:

Buka Komentar