Cara Mudah Membuat Tombol Demo dengan Efek Show Off

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. Codding

#1. Masuk ke blogger.

#2. Pilih menu tema.

#3. Kemudian pilih edit html.

#4. Letakkan kode CSS ini tepat di atas kode ]]></b:skin> atau </style>

#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;}

#5. kemudian pilih simpan tema.

2. Cara Pemasangan

#1. Pilih menu postingan. 

#2. Pilih entri baru.

#3. Jika sudah dalam postingan > pilih tab HTML > kemudian letakkan kode ini di dalamnya.

<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

Demo

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.

Share this post