Pada kesempatan ini, kami bagikan ke temen-teman Cara mempercantik tombol di Divi theme dengan menambahkan beberapa kode CSS. Seperti biasanya buka terlebih dahulu layout dari tampilan website Anda.
Langka-langkah
- Tambahkan modul baru dan pilih Tombol dan masukan judul tombol dan URL nya
- Edit pengaturan tombol, beralih kesebelah kiri yaitu menu Desain rubah dari Tidak menjadi Ya.
- Untuk warna background dan warna tulisan bisa pilih sesuka Anda yang penting menarik dan mudah dipandang.
Untuk ukuran Teks gunakan 18px.
Untuk lebar tombol pembatas gunakan 0px.
Untuk tombol pembatan radius gunakan 0px
Untuk jarak antar huruf gunakan 2px
Untuk tombol jenis huruf gunakan font yang sesuai atau selera Anda
Untuk show tombol icon gunakan icon download jika untuk link download, bisa juga pilih icon sesuai dengan tombolnya
Rubah dari Ya menjadi Tidak pada bagian “Hanya menunjukan Icon di Hover untuk tombol”
Untuk Background Hover Tombol sedikit berbeda dengan warna tombol supaya lebih menarik - Selanjutnya ke bagian Jarak, rubah Custom Pending untuk kanan 65px dan kiri 25px
- Setelah itu beralih ke tab sebelahnya atau Lanjutan > isi Kelas CSS dengan kode “custom_button_1” (tanpa tanda petik)
- Selanjutnya klik centang untuk menyelesaikan dan pilih tombol Simpan untuk menyimpan perubahan
- Selanjutnya beralih ke darbor web anda, menuju Opsi Tema (DIVI), tambahkan Custom CSS seperti berikut
.custom_button_1:after { background-color: #207fe5; /* Change this color to your own */ padding: 5px 12px; top: 0; right: 0; bottom: 0; border-left: 1px solid #207fe5; /* Change this color to your own */ }
Keterangan
- kode .custom_button_1 menunjukan kelas CSS yang ada di modul tadi
- Kode warna icon #207fe5 bisa gunakan sama dengan warna Background Hover pada tombol