Cara Membuat Tombol Demo dan Download Animasi Icon SVG
Blog Buttatoa | Tombol Demo dan Download Icon SVG - Tutorial kali ini, saya akan membagikan cara membuat tombol demo, download dan buy yang unik dan memberi sedikit tambahan berupa efek animasi hover yang menggunakan icon SVG.
Mungkin banyak yang sudah bertebaran diluar sana tutorial seperti ini, namun umumnya masih menggunakan icon font-awesome. dan tentu saja kalian yang ingin mendapatkan loading yang cepat, pastinya perlu beralih ke icon svg.
Oke, langsung saja kalian perhatikan cara membuat tombol demo, download dan buy menggunakan icon svg seperti berikut dibawah ini:
1. Pertama-taman, kalian menuju ke dashboard blogger lalu pilih Tema 👉 Edit HTML.
2. Copy CSS berikut dibawah dan pastekan diatas kodekode
/* CSS Button Tombol By Blog Butttoa */
.tombol {position: relative;display: inline-block;height: 36px;width:140px;line-height: 35px;padding: 0;border-radius: 20px;background: #6a3c78;border: 2px solid #fe780278;box-shadow: 0 0 3px #fe780278;margin: 5px;transition: .5s}
.tombol.demo:hover, .tombol.demo span.circledemo {background-color: #0099cc}
.tombol.dwnl:hover, .tombol.dwnl span.circledwnl {background-color: #efa666}
.tombol.buys:hover, .tombol.buys span.circlebuys {background-color: #00b489}
.tombol span.circledemo, .tombol span.circledwnl, .tombol span.circlebuys{display: block;color: #fff;position: absolute;float: left;margin: 2px;height: 28px;width: 28px;top: 2px;left: 3px;transition: .5s;border-radius: 50%}
.tombol:hover span.circledemo, .tombol:hover span.circledwnl, .tombol:hover span.circlebuys{left: 100%;margin-left: -32px;background-color: #2c2c31;color: #0099cc}
.tombol span.circledemo{background-color: #0099cc;background-position:center;background-repeat:no-repeat;
background-size:18px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 10.87L7.91 8.1C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39C21.61 2.39 16.66 .269 11 5.93C8.81 8.12 7.5 10.53 6.65 12.64C6.37 13.39 6.56 14.21 7.11 14.77L9.24 16.89C9.79 17.45 10.61 17.63 11.36 17.35C13.5 16.53 15.88 15.19 18.07 13C23.73 7.34 21.61 2.39 21.61 2.39M14.54 9.46C13.76 8.68 13.76 7.41 14.54 6.63S16.59 5.85 17.37 6.63C18.14 7.41 18.15 8.68 17.37 9.46C16.59 10.24 15.32 10.24 14.54 9.46M8.88 16.53L7.47 15.12L8.88 16.53M6.24 22L9.88 18.36C9.54 18.27 9.21 18.12 8.91 17.91L4.83 22H6.24M2 22H3.41L8.18 17.24L6.76 15.83L2 20.59V22M2 19.17L6.09 15.09C5.88 14.79 5.73 14.47 5.64 14.12L2 17.76V19.17Z' fill='white'/%3E%3C/svg%3E")}
.tombol span.circledwnl{background-color: #efa666;background-position:center;background-repeat:no-repeat;
background-size:20px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.83 7.13 7.39 5.75 8.95 4.38 11 4.08V12.15L9.4 10.6L8 12L12 16L16 12L14.6 10.6L13 12.15V4.08Q15.58 4.43 17.29 6.39 19 8.35 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20Z' fill='white'/%3E%3C/svg%3E")}
.tombol span.circlebuys{background-color: #00b489;background-position:center;background-repeat:no-repeat;
background-size:18px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9,20A2,2 0 0,1 7,22A2,2 0 0,1 5,20A2,2 0 0,1 7,18A2,2 0 0,1 9,20M17,18A2,2 0 0,0 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20A2,2 0 0,0 17,18M7.2,14.63C7.19,14.67 7.19,14.71 7.2,14.75A0.25,0.25 0 0,0 7.45,15H19V17H7A2,2 0 0,1 5,15C5,14.65 5.07,14.31 5.24,14L6.6,11.59L3,4H1V2H4.27L5.21,4H20A1,1 0 0,1 21,5C21,5.17 20.95,5.34 20.88,5.5L17.3,12C16.94,12.62 16.27,13 15.55,13H8.1L7.2,14.63M9,9.5H13V11.5L16,8.5L13,5.5V7.5H9V9.5Z' fill='white'/%3E%3C/svg%3E")}
.tombol span.titletombol, .tombol span.titletombol-hover{position: absolute;transition: .5s;left: 50px;text-align: center;margin: 0 auto;font-size: 15px;font-weight: bold;transition: .5s;color: #fff}
.tombol span.titletombol-hover{left: 20px;opacity: 0;color: #fff}
.tombol:hover span.titletombol{opacity: 0}
.tombol:hover span.titletombol-hover{opacity: 1}3. Setelah itu, kalian tinggal mengaplikasikannya kedalam postingan dengan cara masukkan kode script dibawah di dalam postingan, namun sebelumnya ubah dulu ke mode tampilan HTML.
Script dibawah ini kalian gunakan jika ingin menampilkan 2 (dua) atau lebih tombol. Kode yang diberi warna orange dibawah, kalian ganti dengan alamat URL Tautan(link) tujuan. Perhatikan contoh gambar.
<div id="tombol" style="text-align:center">
<a href="#" class="tombol demo" target="_blank">
<span class="circledemo"></span><span class="titletombol">Cek Demo</span>
<span class="titletombol-hover">Click here</span>
</a>
<a href="#" class="tombol dwnl" target="_blank">
<span class="circledwnl"></span><span class="titletombol">Download</span>
<span class="titletombol-hover">Click here</span>
</a>
<a href="#" class="tombol buys" target="_blank">
<span class="circlebuys"></span><span class="titletombol">Buy Now</span>
<span class="titletombol-hover">Click here</span>
</a>
</div>
3. Sedangkan script dibawah ini kalian gunakan jika hanya ingin menampilkan satu tombol saja.
<div id="tombol" style="text-align:center">
<a class="tombol demo" href="#" target="_blank">
<span class="circledemo"></span><span class="titletombol">Cek Demo</span>
<span class="titletombol-hover">Click here</span>
</a></div>
Catatan : Jika kalian ingin menggunakan tombol yang lain seperti download atau buy, kalian ubah kode yang diberi warna biru dan sesuaikan kode yang ada diatas, sementara yang berwarna orange, seperti kode sebelumnya diatas kalian masukkan alamat URL tujuan tautan (link).
Nah itulah diatas tutorial singkat cara membuat tombol (button) Demo, Download dan Buys kali ini. Semoga bermanfaat, Wassalam.
Post a Comment for "Cara Membuat Tombol Demo dan Download Animasi Icon SVG"