Tombol video baru di halaman utama Framer baru-baru ini mendapatkan banyak popularitas. Fitur keren yang menambahkan suasana sinematik ke situs web. Dalam tutorial ini, kami memperkenalkan cara membuat tombol video sinematik kita sendiri di Framer.

Membuat Tombol Video Sinematik

1. Menyisipkan Bingkai dan Video

Mulailah dengan menggambar bingkai yang akan menjadi latar belakang tombol. Sesuaikan ukuran bingkai dan buat sudutnya melengkung sesuai keinginan. Setelah itu, sisipkan video dan sesuaikan skala agar sesuai dengan lebar tombol. Kemudian seret video ke dalam bingkai untuk mengunggahnya.

2. Penataan Teks dan Tombol

Selanjutnya, tambahkan teks dan ikon ke tombol. Hiasi dengan gaya yang diinginkan. Setelah memilih semua teks dan ikon, tekan ⌥ + ⌘ + ⏎(Mac) / ctrl + alt + ⏎(Windows) untuk menambahkan stack. Seret stack ke dalam bingkai. Untuk meningkatkan keterbacaan teks, kurangi sedikit opacity video.

3. Membuat Komponen

Pilih tombol dan buat komponen. Tambahkan variant baru dan kembalikan opacity video ke 1. Tambahkan kursor pointer ke varian default. Terakhir, hubungkan varian dengan menggunakan "mouse enter/leave".

4. Menambahkan Efek Hover (Opsional)

Anda bisa selesai di sini, tetapi jika ingin menambahkan efek khusus, Anda bisa menyisipkan efek hover. Pilih komponen tombol dan tambahkan overlay. Tata sesuka Anda, lalu seret blok video lain. Sesuaikan ukurannya dan buat sudutnya melengkung, lalu unggah video yang sama yang digunakan pada tombol.

Coba proyek ini→

Artikel ini adalah adaptasi dan terjemahan konten dari blog resmi Framer yang berjudul ‘How to create a cinematic video button in Framer’.