Cara Membuat Gradient Efek Button Hover" yang dapat digunakan untuk mempercantik tampilan button pada blog kamu.
Sebagai contoh, silahkan arahkan kursos ke button dibawah ini :
Nah, bagus dan menarik bukan?
Untuk membuat button seperti itu, kita langsung saja dan simak cara berikut ini.
Cara Membuat Gradient Efek Button Hover
- Login ke akun blogger.com milikmu.
- Kemudian masuk ke menu Tema => Edit HTML.
- Setelah itu, copy kode CSS dibawah ini dan pastekan tepat diatas </head>.
<style type="text/css">
/* Button Hover by Bacalah.biz */
.Bacalahbizbtn{
text-align: center;
}
.Bacalahbizbtn{
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;
}
.BacalahbizbtnGradient{
masukkan script iklan disini
background-image: linear-gradient(to left,#FFC312,#EE5A24,#FFC312);
}
.Bacalahbizbtn:hover{
background-position: right;
}
</style>Setelah selesai, silahkan tekan tombol Simpan. Untuk menggunakan gradient efek button hover tersebut, silahkan copy kode dibawah ini dan letakkan pada mode HTML setiap kamu akan memposting atau ingin menggunakan button ini.
}
.Bacalahbizbtn:hover{
background-position: right;
}
</style>
Silahkan ganti warna gradient dengan yang kamu inginkan.
<div class="Bacalahbizdbtn">
<button class="Bacalahbizbtn BacalahbizbtnGradient">Hover Button</button>
</div>Mudah dan singkat bukan?
