5 Desain Modul Tombol Divi Kreatif & Cara Membuatnya

Dalam posting ini, saya akan menunjukkan kepada Anda 5 desain modul tombol Divi kreatif yang dapat Anda capai dengan mudah dengan Modul Tombol Divi. Modul tombol adalah salah satu yang paling populer dari semua modul Divi karena tombol sangat penting untuk mengarahkan pengunjung ke tujuan yang Anda inginkan di seluruh situs web. Oleh karena itu, sangat penting bagi kami sebagai desainer dan pengembang untuk membuat tombol ini menarik dan menarik.

Mari kita menggali!

Sneak Peek

Berikut adalah tampilan singkat pada tombol yang akan kita buat dalam tutorial ini.

1. Tombol Perbatasan Panah Kiri

2. Tombol Garis Bergerak

3. Tarik Tombol Tab

4. Tombol Logo Lingkaran

5. Tombol Cahaya

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

5 Desain Modul Tombol Divi & Cara Membuatnya

1. Tombol Perbatasan Panah Kiri

Untuk memulai, buat bagian baru dengan satu baris kolom dan tambahkan modul tombol ke baris.

Kemudian ubah teks konten default tombol untuk membaca "Memulai" (atau apa pun yang Anda inginkan sebenarnya).

Sekarang saatnya untuk beralih ke pengaturan desain dan memperbarui yang berikut:

Gunakan Gaya Kustom untuk Tombol: YA
Warna Teks Tombol: #ffffff
Warna Latar Tombol: #324376
Lebar Perbatasan: 0px
Jarak Huruf Tombol: 0.2em
Font Tombol: Fira Sans
Gaya Font: TT (huruf besar), U (digarisbawahi)
Warna Garis Bawah: rgba (255,255,255,0.2)
Gaya Garis Bawah: ganda
Ikon Tombol: lihat tangkapan layar
Warna Ikon Tombol: #ff4751
Penempatan Ikon Tombol: Kiri

Padding Kustom: Kiri 40px, Kanan 20px

Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 22px
Posisi Vertikal Bayangan Kotak: 0px
Warna Bayangan: #ff4751

(Padding kiri kustom 40px menciptakan ruang tetap yang diisi dengan bayangan kotak untuk duduk rata dengan ikon tombol panah kiri.)

Karena bayangan kotak kiri rata dengan awal ikon panah, ini menciptakan efek batas panah yang bagus. Jika karena alasan tertentu tidak menempel pada ikon, Anda dapat menyesuaikan posisi horizontal sesuai kebutuhan. Keindahan desain ini adalah bahwa batas panah kiri akan tetap di tempatnya bahkan saat menambahkan jumlah teks tombol yang berbeda.

Berikut adalah hasil akhirnya.

2. Tombol Garis Bergerak

Gaya tombol berikutnya ini memiliki lebih banyak nuansa teknis dan minimalis. Garis dibuat menggunakan bayangan kotak dan gradien latar belakang yang dipisahkan oleh batas transparan. Saya juga telah menambahkan efek hover yang menggerakkan bayangan kotak ke kanan yang pada gilirannya memindahkan garis bawah sedikit ke kanan untuk interaksi yang halus.

Untuk memulai, buat bagian baru dengan satu baris kolom dan tambahkan modul tombol ke baris.

Perbarui konten teks tombol ke apa pun yang Anda inginkan. Saya meninggalkan default "klik di sini" untuk contoh ini. Kemudian perbarui pengaturan desain sebagai berikut:

• Gunakan Gaya Kustom untuk Tombol: YA
• Warna Teks Tombol: #3b7986
• Tombol Latar Belakang Gradien Warna Kiri: rgba(255,255,255,0)
• Warna Kanan Gradien Latar Belakang Tombol: #3b7986
• Arah Gradien: 180 derajat
• Posisi Awal: 96%
• Posisi Akhir: 0%
• Lebar Perbatasan Tombol: 10px
• Warna Perbatasan Tombol: rgba(0,0,0,0)
• Radius Perbatasan Tombol: 0px
• Jarak Huruf Tombol: 6px
• Font Tombol: Exo 2
• Berat Huruf: Tebal
• Gaya Font: Tt (huruf kecil)
• Ikon Tombol: Panah Kanan (lihat tangkapan layar)
• Hanya Tampilkan Ikon di Arahkan untuk Tombol: TIDAK
• Padding Kustom: Bawah 0px
• Bayangan Kotak: lihat tangkapan layar
• Posisi Horizontal Bayangan Kotak: -15px
• Posisi Vertikal Bayangan Kotak: 15px
• Kekuatan Penyebaran Bayangan Kotak: -13px
• Warna Bayangan: #3b7986

Anda mungkin perlu menyetel warna latar belakang ke #ffffff saat mengarahkan kursor juga karena ini adalah setelan default untuk tombol.

Kunci dari desain ini adalah gradien warna latar belakang dan bayangan kotak. Dengan mengatur titik awal gradien warna latar belakang ke 96%, ini membuat garis dengan lebar 4% di bagian bawah tombol. Kemudian setelah kita memposisikan dan mewarnai bayangan kotak, kita memiliki elemen garis lain yang membungkus tombol dengan baik. Plus, ikon panah kanan bekerja dengan baik dengan elemen desain garis juga.

Berikut adalah desain akhir.

Untuk menambahkan efek hover yang menggerakkan bayangan kotak, kembali ke pengaturan desain dan arahkan kursor ke opsi "Posisi Horizontal Bayangan Kotak". Anda akan melihat ikon panah popup tepat di sebelah teks. Klik untuk membuka opsi hover untuk pengaturan tertentu.

Kemudian klik pada tab hover dan ubah nilainya menjadi 13px.
Anda akan melihat efek hover yang dipratinjau di pembuat visual.

Berikut adalah tampilan efek hover:

3. Tarik Tombol Tab

Desain tombol berikutnya ini menambahkan bayangan kotak untuk membingkai ikon tombol kanan yang tetap dalam posisi absolut. Pada hover tombol meluas ke kanan menciptakan efek yang Anda tarik tab.

Untuk membuat tombol, pertama, buat bagian baru dengan baris satu kolom, lalu tambahkan modul tombol ke baris.

Buka pengaturan modul tombol dan perbarui teks tombol di bawah tab konten ke apa pun yang Anda inginkan (saya akan menggunakan teks "Pelajari Lebih Lanjut").

Kemudian lompat ke tab desain dan perbarui yang berikut:

Gunakan Gaya Kustom untuk Tombol: YA
Warna Teks Tombol: #ffffff
Tombol Latar Belakang Gradien Warna Kiri: #7D80DA
Warna Kanan Gradien Latar Belakang Tombol: #8EEDF7
Arah Gradien: 90 derajat
Lebar Batas Tombol: 0px
Radius Perbatasan Tombol: 10px
Jarak Huruf Tombol: 1px
Font Tombol: Sumber Sans Pro
Berat Huruf: Tebal
Gaya Huruf: TT
Ikon Tombol: Lihat Tangkapan Layar
Warna Ikon Tombol: #ffffff
Padding Kustom: Kiri 1em, Kanan 2.5em
Bayangan Kotak: Lihat Tangkapan Layar
Posisi Horizontal Bayangan Kotak: -35px
Posisi Vertikal Bayangan Kotak: 0px
Warna Bayangan: #7d80da

Kunci dari desain ini adalah bayangan kotak di sebelah kanan yang akan membingkai ikon. Tapi sekarang ikon perlu diposisikan agar pas di dalam area gradien. Untuk melakukan ini, kita perlu menambahkan beberapa CSS khusus.

Buka tab Advanced dan masukkan CSS berikut di dalam kotak input Setelah:

position: absolute;
right: 5%;

CSS ini menargetkan lokasi ikon dan memberikannya posisi absolut 5% dari tepi kanan tombol.

Lihat desainnya sejauh ini.

Sekarang untuk menambahkan efek hover, kita hanya perlu memperbarui opsi padding yang tepat di bawah tab hover. Untuk melakukan ini, buka pengaturan tombol dan buka opsi hover dengan mengarahkan kursor ke elemen padding khusus dan mengklik ikon kursor yang muncul. Kemudian pilih tab hover dan masukkan berikut ini:

Padding Kustom: 4em Kanan

Sekarang mari kita lihat hasil akhirnya.

4. Tombol Logo Lingkaran

Untuk desain selanjutnya, kita akan mengubah ikon/gambar lingkaran menjadi tombol yang dapat diklik dengan efek hover keren yang menunjukkan ajakan bertindak singkat.

Untuk memulai, buat bagian baru dengan satu baris kolom dan tambahkan modul tombol ke baris.

Kemudian buka pengaturan desain tombol. Di bawah tab konten, tambahkan kata "Pergi" untuk teks tombol.

Lalu pergi ke pengaturan desain dan pilih untuk menggunakan gaya tombol kustom. Pertama tambahkan gambar lingkaran sebagai gambar latar belakang untuk tombol. Agar desain ini berfungsi, pastikan Anda menggunakan gambar png dari logo atau ikon yang berbentuk lingkaran sempurna dan dimensi gambar memiliki tinggi dan lebar yang sama. Gambar yang saya gunakan adalah png yaitu 118px kali 118px. Ambil di sini jika Anda ingin:

Setelah Anda menambahkan gambar latar belakang, pastikan ukuran gambar latar belakang diatur ke "Ukuran Sebenarnya." Ini akan memastikan gambar mempertahankan dimensi aslinya (118px kali 118px).

Selanjutnya kita ingin ukuran tombol kita menjadi dimensi yang tepat dari gambar lingkaran kita. Untuk melakukan ini, lompat ke tab Advanced dan masukkan CSS khusus berikut di Elemen Utama:

width: 118px;
height: 118px;
line-height: 118px !important;
text-align: center;

Perhatikan bahwa css menyetel lebar, tinggi, dan tinggi garis semuanya ke nilai yang sama yaitu 118px. Ini adalah lebar dan tinggi yang sama dengan gambar kita. Sekarang gambar sangat pas di tombol. Tinggi garis diatur ke 118px sehingga teks di dalam tombol akan dipusatkan secara vertikal di dalam tombol (belum terpusat sempurna karena masih ada beberapa bantalan yang perlu kita singkirkan yang membuangnya). Dan text-align: center memastikan teks di dalam tombol tetap berada di tengah bahkan ketika modul tombol disejajarkan ke kiri atau kanan.

Sekarang yang perlu kita lakukan adalah menyelesaikan beberapa pengaturan desain yang akan melengkapi desain. Buka tab desain dan perbarui yang berikut:

Warna Teks Tombol (default): rgba(0,0,0,0)
Warna Teks Tombol (arahkan kursor): #ffffff

(Ini menyembunyikan teks tombol secara default dan menampilkannya dalam warna putih saat mengarahkan kursor)

Warna Latar Belakang (default): #121212
Warna Latar Belakang (arahkan kursor): #da00f2

(Ini menunjukkan latar belakang hitam di belakang gambar secara default dan kemudian warna latar belakang merah muda cerah saat mengarahkan kursor.)

Lebar Batas Tombol: 0px
Radius Tombol: 50%;

(Mengatur radius tombol menjadi 50% akan mengubah tombol menjadi bentuk lingkaran karena tinggi dan lebar tombol telah diatur ke 118px di css khusus.)

Font Tombol: Poppins
Berat Huruf: Tebal
Gaya Huruf: TT
Tampilkan Ikon Tombol: TIDAK (memiliki ikon tombol akan membuang teks yang berada di tengah)
Padding Kustom: 0px Atas, 0px Bawah

(Penting untuk menghilangkan padding atas dan bawah sehingga tinggi garis yang kita atur di custom css akan membuat teks berada di tengah secara vertikal.)

Bayangan Kotak: lihat tangkapan layar
Posisi Vertikal Bayangan Kotak: 0px
Warna Bayangan (default): rgba(0,0,0,0)
Warna Bayangan (arahkan kursor): rgba(0,0,0,0.68)

(Ini akan menampilkan bayangan kotak kecil di sekitar lingkaran saat mengarahkan kursor untuk efek popout tambahan.)

Berikut adalah desain akhir dengan efek hover.

5. Tombol Cahaya

Desain terakhir ini cukup mudah dan sederhana untuk dilakukan. Yang diperlukan hanyalah penggunaan kreatif warna gradien latar belakang dan warna bayangan kotak. Efek hover hanya meningkatkan ukuran bayangan kotak untuk memberikan lebih banyak efek cahaya.

Untuk memulai, buat bagian baru dengan baris satu kolom dan tambahkan modul tombol ke baris. Sebelum Anda memperbarui modul tombol, buka pengaturan bagian dan beri bagian warna latar belakang gelap (#333333).

Sekarang buka pengaturan tombol.

Anda dapat meninggalkan teks tombol default "Klik Di Sini". Kemudian perbarui pengaturan desain berikut:

Penjajaran Tombol: Tengah
Gunakan Gaya Kustom untuk Tombol: YA
Ukuran Teks Tombol: 18px
Warna teks tombol: #ffffff

Tombol Warna Kiri Gradien Latar Belakang: #00ff8c
Warna Kanan Gradien Latar Belakang Tombol: #15c39a
Tipe Gradien: Radial
Arah Radial: Pusat
Posisi Akhir: 75%

(Mengatur jenis gradien ke Radial akan memberikan gradien bentuk lingkaran yang mengembang ke luar. Pastikan warna yang lebih terang muncul di tengah gradien untuk menciptakan efek cahaya.)

Lebar Batas Tombol: 0px
Radius Batas Tombol: 100px
Jarak Huruf Tombol (default): 4px
Jarak Huruf Tombol (arahkan kursor): 5px

(Meningkatkan spasi huruf pada hover akan sedikit memperluas seluruh tombol untuk efek yang bagus)

Berat Huruf: Sangat Tebal
Gaya Huruf: I, TT
Ikon Tombol: panah kanan (lihat tangkapan layar)
Padding Kustom: 20px Atas, 20px bawah, 30px kiri, 50px kanan

(Anda membutuhkan lebih banyak bantalan kanan untuk memperhitungkan ikon tombol panah kanan)

Bayangan Kotak: lihat tangkapan layar
Posisi Vertikal Bayangan Kotak: 0px
Kekuatan Buram Bayangan Kotak (default): 64px
Kekuatan Buram Bayangan Kotak (arahkan kursor): 100px
Kekuatan Penyebaran Bayangan Kotak: -12px
Warna Bayangan: rgba (0,255,140,0,66)

(Bayangan kotak menambah efek cahaya saat Anda mencocokkan warna bayangan dengan warna tombol. Meningkatkan kekuatan buram saat mengarahkan kursor juga akan memperbesar cahaya tombol)

Lihat desain akhir dengan efek hover.

Lebih Banyak Inspirasi Tombol

Untuk mempelajari tentang inspirasi tentang gaya tombol, lihat beberapa artikel lain berikut:

• Cara membuat tombol font ikon dengan Divi
• Rancang Tata Letak Divi Layar Penuh Unik dengan Tombol Gulir Animasi
• Cara Mendesain Tombol Sosial Monarch Anda agar Sesuai dengan Desain Situs Anda
• 7 Kunci untuk Membuat Tombol Berlangganan yang Tak tertahankan

Pikiran Akhir

Saya harap contoh-contoh ini telah menginspirasi Anda untuk memaksimalkan Modul Tombol Divi dengan cara baru yang kreatif! Karena ajakan bertindak sangat penting untuk situs web Anda, selalu baik untuk memiliki berbagai ide di kotak peralatan kami untuk membuat beberapa opsi tombol yang unik. Jangan ragu untuk menggunakan ide-ide ini untuk menghasilkan beberapa gaya tombol Anda sendiri yang menakjubkan!

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!