Perlu membuat tombol dengan efek melayang dengan Elementor ?
Jika ya, duduklah di bus megah ini, karena apa yang akan kita capai hari ini ada di video berikut:
Mari buat halaman lalu modifikasi dengan Elementor, lalu pilih struktur 2 kolom. Di panel mari kita ubah bagian yang baru dibuat dengan memilih Tinggi Min di lapangan Kesombongan Dan segera Tinggi Min ayo klik VH lalu atur kursor ke 100.
Di tab Gaya mari kita ubah warna background menjadi #070e39.
Di kolom pertama, letakkan widget Tombol, ubah teksnya dengan mengetik Melihat rincian dan mari kita ratakan ke kanan
Di tab Gaya mari kita modifikasi tipografi dengan mengubah ukuran pada 15, transformasi di Huruf besar et spasi huruf di 1.1
Di tab maju, ubah semua margin di 20 dan di bagian Kustom CSS, mari rekatkan kode berikut yang menambahkan gradien ke tombol:
pemilih {
–Btn-lebar: 180px;
–Btn-tinggi: 50px;
–Btn-latar belakang: # 0e1538;
–Left-gradient: # F803F8;
– Gradien kanan: # 03F2FD;
}
pemilih a {
position: relative;
lebar: var (–btn-lebar);
tinggi: var (–btn-tinggi);
}
pemilih a: sebelumnya,
pemilih a: setelah {
senang: ";
position: absolute;
sisipan: 0;
transisi: 0.5 detik;
}
pemilih a: anak ke-n (1): sebelumnya,
pemilih a: anak ke-n (1): setelah {
latar belakang: linear-gradient (45deg, var (–left-gradient), var (–btn-background), var (–btn-background), var (–right-gradient));
}
pemilih a: arahkan kursor: sebelum {
sisipan: -3px;
}
pemilih a: arahkan kursor: setelah {
sisipan: -3px;
filter: buram (10 piksel);
}
pemilih rentang {
position: absolute;
atas: 0;
kiri: 0;
width: 100%;
tinggi: 100%;
latar belakang: var (–btn-latar belakang);
z-index: 10;
display: melenturkan;
justify-content: pusat;
menyelaraskan item: pusat;
overflow: disembunyikan;
}
Sekarang jika Anda mengarahkan kursor ke tombol, Anda akan menemukan efek yang luar biasa.
Untuk menambahkan efek kaca mengkilap pada tombol, mari kita juga menempelkan kode berikut:
/ * Efek Kaca Mengkilap * /
pemilih rentang :: sebelum {
senang: ";
position: absolute;
atas: 0;
kiri: -50%;
width: 100%;
tinggi: 100%;
latar belakang: rgba (255,255,255,0.075);
mengubah: condong (160deg);
}
Anda mengamati efek baru yang membawa lebih banyak cahaya ke tombol.
Baca juga: Cara membuat bagian anggota tim dengan Elementor
Sekarang mari kita salin tombol ini dan tempel di kolom kedua. Mari kita ubah perataan tombol ke kiri dan ubah teks menjadi Lihat lebih lanjut.
Sekarang Anda hanya perlu melakukannya menerbitkan pekerjaan Anda atau mempratinjaunya.
Berikut adalah 2 tombol indah yang dibuat.
Dapatkan Elementor Pro Sekarang!
Kesimpulan
Jadi ! Itu saja untuk tutorial ini yang menunjukkan cara membuat tombol dengan efek hover dengan Halaman pembangun Elementor. Jika Anda memiliki kekhawatiran tentang cara menuju ke sana, beri tahu kami di dalam komentar.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
