TUTORIAL MEMBUAT EFEK "SOCIAL MEDIA HOVER" HANYA MENGGUNAKAN HTML DAN CSS

Akbel Tarial May 24, 2023

 


Pada artikel kali ini, kami akan membahas tentang cara membuat efek "Sosial Media Hover" menggunakan CSS. Efek "Social Media Hover" dalam CSS merujuk pada animasi atau perubahan tampilan yang terjadi saat pengguna mengarahkan kursor mouse ke atas elemen media sosial, seperti ikon media sosial atau tautan yang terkait.

Efek ini biasanya digunakan untuk memberikan interaktivitas tambahan pada ikon media sosial atau tautan, menarik perhatian pengguna, atau memberikan umpan balik visual tentang status tautan atau ikon yang sedang dihover.

Dalam tutorial ini, kita akan fokus pada salah satu efek "Sosial Media Hover". Animasi ini terlihat sangat menarik dan mudah diimplementasikan dengan menggunakan CSS.

Ok, mari kita mulai dengan kode HTML kemudian kode CSS yang akan membentuk animasi "Sosial Media Hover" ini. Berikut adalah potongan kode yang perlu Anda tambahkan dalam file HTML dan CSS Anda:

Pertama, buat file HTML dengan nama index.html dan lihat kode di bawah ini. Ingat, Kamu harus membuat file dengan ekstensi hmtl.


Kedua, buat file CSS dengan nama style.css dan ikuti kode di bawah ke dalam file kamu.


Komentar: 
  • Menetapkan beberapa properti untuk elemen <body>, termasuk mengatur margin dan padding menjadi 0, tinggi elemen menjadi 100% dari tinggi viewport (100vh), dan mengatur tata letak flexbox untuk memusatkan konten secara horizontal dan vertikal. Latar belakang diatur menjadi hitam.

Komentar: 
  • Menetapkan beberapa properti untuk elemen <a> dalam kelas "sm". Properti tersebut meliputi tampilan sebagai inline-block, ukuran font, dimensi lebar dan tinggi, tata letak teks menjadi tengah, warna teks menjadi hijau, margin horizontal, transisi animasi selama 0,4 detik dengan transisi linear, dan posisi relatif.
  • Menetapkan properti untuk elemen pseudo-elemen ::before dan ::after dari elemen <a> dalam kelas "sm". Properti ini meliputi konten kosong, posisi absolut terhadap elemen <a>, penggunaan box-sizing untuk mengatur kotak pemodelan, dimensi lebar dan tinggi 100%, dan efek transisi animasi selama 0,4 detik dengan transisi linear.

Komentar: 
  • Menetapkan transformasi skala elemen <a> pada saat digulir dengan pointer, mengubah ukurannya menjadi 80% dari ukuran aslinya.
  • Menetapkan properti untuk elemen pseudo-elemen ::before dari elemen <a> saat dihover. Properti ini meliputi penambahan border dengan ketebalan 4px di sisi kanan dan kiri, serta transformasi skewX dengan sudut kemiringan 20 derajat.
  • Menetapkan properti untuk elemen pseudo-elemen ::after dari elemen <a> saat dihover. Properti ini meliputi penambahan border dengan ketebalan 4px di sisi atas dan bawah, serta transformasi skewY dengan sudut kemiringan -20 derajat.
Kalian juga dapat menonton tutorial lengkap dibawah ini mengenai animasi efek "Sosial Media Hover".


Dalam video di atas, kamu bisa melihat tahapan proses pembuatan animasi efek "Social Media Hover" bukan itu saja jika kamu suka dengan program ini kamu bisa juga melihat kode tersebut dan mempraktekkannya secara langsung.

Bersiaplah untuk mengeksplorasi dunia animasi CSS yang menarik dan mendapatkan pemahaman yang lebih baik tentang cara membuat animasi interaktif yang menarik bagi pengguna Anda.

Jangan lupa untuk membaca artikel selanjutnya di blog kami, Tetaplah terhubung!

Artikel Kami Lainnya



Akbel Tarial

Posted by Akbel Tarial

Post a Comment

0 Comments