Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial Cara Membuat Tombol Dengan Efek Goyang di Hover Blogger dengan mudah.
Tutorial ini sengaja saya buat karena untuk menambah dan mempertahankan jumlah pengunjung atau visitor, karena semakin bagus blog yang di kelola semakin ramai pengunjung yang datang dan berlama di blog kita.
Mungkin dari kalian masih ada yang belum tahu apa itu Hover, nah pada kesempatan kali ini saya akan menjelaskan sedikit tentang Hover.
Hover ialah salah satu element yang menggunakan CSS, dan Hover juga akan bekerja jika kalian menyentuhnya dengan mouse.
Cara membuatnya pun sangat mudah kalian cukup menambahkan CSS ke dalam template kalian, jika kalian ingin membuat Hover pada blog kalian bisa ikuti langkahnya di bawah ini.
Untuk demonya silahkan klik tombol demo yang ada di bawah ini lalu klik tombol download
Cara Terbaru Membuat Tombol Dengan Efek Goyang Di Hover Blogger
- Buka Blog kalian.
- Pilih Tema lalu pilih Edit HTML.
- Salin kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin>.
/* Button Hover by Telatngoding.com */
.Lapakinfobtn{
text-align: center;
}
.Lapakbtn{
border: none;
margin: 20px;
padding: 24px;
width: 220px;
font-family: "montserrat",sans-serif;
text-transform: uppercase;
border-radius: 6px;
cursor: pointer;
color: #fff;
background-size: 200%;
transition: 0.6s;
}
.Infobtn{
background-image: linear-gradient(to left,#FFC312,#EE5A24,#FFC312);
}
.Lapakbtn:hover{
background-position: right;
}
- Simpan template kalian
- Untuk memanggil atau membukanya, silahkan kalian salin kode di bawah ini dan pastekan pada Mode HTML di postingan kalian ( Jangan mode
Compose) harus Mode HTML.
<div class="Lapakinfibtn">
<button class="Lapakbtn Infobtn">LapakInfo</button>
</div>
- Publish postingan kalian dan selesai.