Cara Membuat Tombol Demo dan Download Dengan Ikon SVG

Cara Membuat Tombol Demo dan Download Dengan Ikon SVG - Tombol demo dan download sekarang menjadi komponen penting yang wajib ada pada template blog, karena tombol tersebut akan sangat berguna bila pemilik blog ingin mengulas atau membahas tentang template dan ingin membagikan link demo dan downloadnya.

Sebenarnya, sudah banyak blog yang memberikan tutorialnya tentang cara membuat tombol demo dan download dengan tampilan dan ikon yang sangat keren, namun rata- rata mereka membutuhkan javascript tambahan, yang membuat tombol tersebut menjadi tidak valid amp. Sebenarnya ada juga yang valid amp, namun penampilan masih simple dan sederhana menurut saya. Disini saya akan membuat tombol demo dan download yang sudah valid amp dan tentunya ada ikon SVG yang akan mempercantik dari tampilan tombol tersebut.

Tombol demo dan download dengan ikon svg ini sudah saya terapkan di template blog terbaru saya, yaitu Alpha AMP Template. Berikut tampilan dari tombol demo dan download keren dengan ikon svg yang saya maksud

Cara Membuat Tombol Demo dan Download Keren Dengan Ikon SVG Valid AMP

Simpan CSS berikut ini pada custom-style template blog anda.

/* Tombol demo dan download by www.kangkimin.com */
.btn {width:120px;display: inline-block;position: relative;font-weight: 700;background: #3cc091;padding: 9px 18px;margin:5px 3px;border-radius: 3px;opacity: 1;border: 0;text-transform: uppercase;transition: all .3s ease-out;}
.btn:hover, .btn:active {background: #374760;}
a.btn {color: rgba(255,255,255,1);}
.dm:after {content:url("data:image/svg+xml;charset=utf8,%3csvg width='22' height='22' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23fff' 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");}
.dl:after {content:url("data:image/svg+xml;charset=utf8,%3csvg width='22' height='22' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23fff' d='M17,13L12,18L7,13H10V9H14V13M19.35,10.03C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.03C2.34,8.36 0,10.9 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.03Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");}
.demodownload {text-align:center;margin:10px 2px;}

Silahkan ganti warna sesuai keinginan anda. Selain itu anda juga dapat mengganti ikon svg demo atau download sesuai dengan keinginan anda.

Kemudian untuk menampilkan tombol demo dan download di postingan (HTML Mode), silahkan gunakan kode HTML dibawah ini.

<div class="demodownload">
<a class="btn dm" href="#" title="demo">Demo </a><a class="btn dl" href="#" title="download">Download </a></div>

Ganti "#" sesuai dengan alamat link demo atau download anda.

Sekian pembahasan saya mengenai Cara Membuat Tombol Demo dan Download Dengan Ikon SVG, semoga bermanfaat bagi anda semua, tunggu tutorial blogger menarik lainya, selamat mencoba ^_^.