Cara Membuat Gradient Efek Button Hover

masukkan script iklan disini

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

1. Login ke akun blogger.com milikmu.
2. Kemudian masuk ke menu Tema => Edit HTML.
3. 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{
     background-image: linear-gradient(to left,#FFC312,#EE5A24,#FFC312);
   }
   .Bacalahbizbtn:hover{
     background-position: right;
   }
   </style>

Silahkan ganti warna gradient dengan yang kamu inginkan.

4. Setelah selesai, silahkan tekan tombol Simpan.
5. 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.
   

   <div class="Bacalahbizdbtn">
   <button class="Bacalahbizbtn BacalahbizbtnGradient">Hover Button</button>
   </div>

Mudah dan singkat bukan?