Cara Membuat Gradient Efek Button Hover

Usuluddin, S.Kom    Senin, Februari 03, 2020    TUTORIAL   

Cara Membuat Gradient Efek Button Hover

GoSEO.id - Pada kesempatan kali ini saya akan membagikan tutorial "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 GoSEO.id */
   .GoSEOidbtn{
     text-align: center;
   }
   .GoSEObtn{
     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;
   }
   .GoSEObtnGradient{
     background-image: linear-gradient(to left,#FFC312,#EE5A24,#FFC312);
   }
   .GoSEObtn: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="GoSEOidbtn">
   <button class="GoSEObtn GoSEObtnGradient">Hover Button</button>
   </div>

Mudah dan singkat bukan?

Semoga tutorial "Cara Membuat Gradient Efek Button Hover" ini bermanfaat. Silahkan tinggalkan komentar jika ada yang tidak dimengerti dan ingin ditanyakan.

---

Apakah kamu sudah membaca :
# Pentingnya Penggunaan Email Profesional Dalam Bisnis
# Cara Daftar Google News Untuk Blogger
# Memasang Widget Recent Post Blogger
# Embed Video Blogger Agar Responsive
# Meningkatkan Kecepatan Blog Dengan Cloudflare
# Perbedaan Visitor dan Unique Visitor Google Analytics
# Menghilangkan URL ?m=1 Blogger
# Membuat Press Release yang Baik dan Disukai Media
# Membuat URL Sumber Otomatis Blogger
# Membuat URL Shortener Dengan Javascript
# Cara Menghapus Spam Backlinks
# Mempercepat Loading Iklan Adsense Terbaru
# Media Sosial Sebagai Peningkat Traffic Bisnis
# Tutorial SEO Langkah Demi Langkah Untuk Pemula
# Cara Membuat Strategi Konten
# Rekomendasi SEO untuk YouTube
# Bagaimana Menghindari Kesalahan Informasi SEO
# Ebook Blogger Profesional, Adsense, FB Ads Serta SEO Terlengkap
# 10 Cara Menghasilkan Dari Blog Tanpa Google Adsense