Cara Membuat Tombol Demo dengan Efek Show Off
February 14, 2019
Sebelumnya aku pernah menjelaskan cara membuat tombol download dan demo secara bersamaan, namun pada kesempatan kali ini aku akan membagikan cara membuat tombol demo saja dengan efek terbaru.
Bang, lu suka amat buat postingan tentang materi yang sama, tapi banyak kreasi? gak bosan?
Gaklah. Lagian aku hobi menulis tentang materi yang sama, dan mencoba mencari cara baru untuk dikembangkan oleh semua orang. Yah, memang sedikit membosankan. Tapi mana tau ada dari sobat semua, ingin coba-coba tombol download dan demo yang keren. Aku coba buat, terutama tombol demo atau download yang selama ini aku posting berulang-ulang dalam versi lain hehehe. Untuk membuatnya, yuk langsung saja ikuti langkah-langkahnya dibawah ini.
1. Coddingnya
#1. Masuk ke blogger.#2. Pilih menu tema.
#3. Kemudian pilih edit html.
#buttondemo {margin:15px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family:'Open Sans',sans-serif;text-decoration:none;font-weight:700;background:#f24a4a;letter-spacing:.5px;padding:10px 50px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #202d3a;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
a.btn:hover {background:#f24a4a;color:#fff;box-shadow:inset 0px -50px 0px #202d3a;}
a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;}2. Cara Memasangnya
#1. Pilih menu postingan.#2. Pilih entri baru.
<div id="buttondemo"><a class="btn" href="#">DEMO</a></div>| Nama | Keterangan |
|---|---|
| # | Ubah dengan alamat url yang anda tujuan anda |
| DEMO | Ubah dengan kata-kata sesuai yang anda inginkan |
Baca juga : cara membuat efek hujan salju yang menyenangkan.Jika udah selesai dimasukkan semua kodenya, silahkan lihat hasilnya dengan cara menekan tombol demo diatas. Jika dirasa kurang cocok, sobat bisa berpindah ke artikel postingan yang lain seputar tombol download dan demo, caranya klik disini. Itu aja sih menurut aku. Terima kasih hehehe.