CSS Only Day 4: Runaway Click — Tombol Jahil Menghindar Tanpa JavaScript
Eksperimen tombol interaktif yang kabur saat didekati kursor mouse (Runaway Click / Impossible Button) hanya memanfaatkan CSS :hover dan transform translate.
Pernah lihat tombol “No” atau “Cancel” di website yang selalu menghindar setiap kali kursor mouse mendekat? Umumnya efek iseng ini dibuat memakai script JavaScript event listener mousemove.
Di seri CSS Only Day 4, trik tombol Runaway Click ini dieksekusi 100% menggunakan pseudo-class :hover, transition, dan transform: translate() bertahap pada pembungkus elemen.
Logika CSS
Dengan membagi area sensitif ke grid tak kasat mata atau memanfaatkan pseudo-element wrapper yang lebih luas dari tombolnya, kursor yang masuk memicu perpindahan posisi sebelum tombol sempat diklik:
.runaway-btn {
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.runaway-btn:hover {
transform: translate(calc(var(--rand-x, 80px)), calc(var(--rand-y, -60px)));
}Tonton di YouTube Shorts
You might also like
CSS Only Animated Dividers: Pembatas Section Modern Tanpa Ekstra Library
Koleksi pemisah section animasi website modern hanya menggunakan CSS murni dan HTML tanpa library eksternal. Copy & paste siap pakai dengan custom speed dan color.
CSS Only Day 5: Wave Bar — Efek Gelombang Loading Bar Tanpa JS
Eksperimen CSS animation wave bar murni tanpa JavaScript. Membuat visual efek audio waveform dan gelombang loading fluida dengan CSS keyframes.
CSS Only Day 3: Orbit Dots — Animasi Orbit Partikel Memutar Murni CSS
Eksperimen animasi orbit melingkar (Orbit Dots) untuk loading spinner dan visual atomik menggunakan transform rotate dan CSS custom property berjenjang.
Trending Posts
Tutorial Saweria Donasi + OBS Studio untuk Live Streaming — Bedah Setup Lengkap
Kado Ulang Tahun Interaktif: Pixel Art 8-Bit Side Scrolling Website
Monorepo Patterns for Full-Stack: What Actually Works
Digimon World 3 Randomizer: Pengaturan, Patching, dan Emulator
The Golden Era of PS1 JRPGs Nostalgic Soundtrack Mix — Final Fantasy VII, Chrono Cross & Xenogears
ADHD Focus Soundtrack: Retro RPG Lofi Beats untuk Coding & Deep Work
Enjoyed This Post?
Want to discuss the topic, have questions, or looking to collaborate on something similar? Drop a comment below or reach out directly.
