Web tasarımında bazen en çok etkiyi, en basit dokunuşlar yaratır. Bu çalışmada, kullanıcı fareyle butonlara yaklaştıkça onları adeta kendine çeken, modern ve yumuşak görünümlü “mıknatıs butonlar” geliştiriyoruz. Amacımız, görsel olarak sade ama etkileşim açısından zengin bir deneyim sunmak. CSS ile modern bir görünüm oluşturuyor, JavaScript ile bu görselliğe duyarlılık ve hareket katıyoruz.
Bu tarz detaylar, bir kullanıcı arayüzünü sıradanlıktan çıkarıp profesyonel bir deneyime dönüştürebilir. Şimdi, bu butonların nasıl çalıştığını ve adım adım nasıl inşa edildiğini detaylıca birlikte inceleyeceğiz.
1. HTML Yapısı: Etkileşimin Temeli
Mıknatıs efektli butonlar gibi görsel olarak etkileyici ve kullanıcı ile doğrudan etkileşim kuran bileşenler inşa ederken, en önemli adım doğru ve sade bir HTML yapısı kurmaktır. HTML, kullanıcı arayüzümüzün iskeletini oluşturur. CSS ve JavaScript ile bu iskeleti şekillendirir ve canlandırırız. İşe HTML ile başlayalım:
Tam Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Modern Etkileşimli Butonlar</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="button-wrapper">
<button class="magnetic-button">Tıkla</button>
<button class="magnetic-button">Başla</button>
<button class="magnetic-button">Devam Et</button>
</div>
</body>
</html>
Code language: HTML, XML (xml)1.1. <!DOCTYPE html>
Bu satır, tarayıcıya belgenin HTML5 standardına göre yazıldığını belirtir. Böylece modern tarayıcılar bu belgeyi güncel web standartlarına göre işler. HTML5, etkileşimli elemanları desteklemesi açısından bizim gibi dinamik öğeler geliştirenler için idealdir.
1.2. <html lang="tr">
<html> etiketi, tüm HTML belgesini kapsar. lang="tr" özelliği, sayfanın Türkçe olduğunu bildirir. Bu, ekran okuyucular ve arama motorları açısından önemlidir. Dil bilgisi kontrolleri, arama sonuçları optimizasyonu (SEO) ve erişilebilirlik bu sayede iyileşir.
1.3. <head> Bölümü
Bu kısımda sayfanın görünmeyen ama önemli meta verileri yer alır:
– <meta charset="UTF-8">
Bu satır, Türkçe karakterlerin (ğ, ü, ş, ç vb.) doğru şekilde gösterilmesini sağlar. Özellikle Türkçe içerikli web projelerinde olmazsa olmazdır.
– <title>Modern Etkileşimli Butonlar</title>
Tarayıcının sekmesinde görünen metindir. Kullanıcı deneyimini artırır ve sayfanın amacını tanımlar. Aynı zamanda SEO için de önemlidir.
– Google Fonts Bağlantısı:
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
Code language: HTML, XML (xml)Bu satır, Google Fonts üzerinden “Poppins” yazı tipini projeye dahil eder. Kullanıcı arayüzlerinde yazı tipi seçimi görsel bütünlük açısından oldukça önemlidir. Poppins, modern ve okunaklı bir sans-serif fonttur, bu nedenle sıklıkla tercih edilir.
1.4. <body>: Görsel İçeriğin Ana Sahnesi
Kullanıcının gördüğü tüm öğeler <body> etiketi içerisinde yer alır. Bu örnekte yalnızca butonlar var. Ama bu butonlar, stil ve etkileşim açısından zenginleştirilmiş durumda.
– <div class="button-wrapper">
Bu div, tüm butonları kapsayan bir konteynerdir. Amaç, butonları tek bir grup içinde hizalayabilmek ve stil uygulayabilmektir. Ayrıca CSS ile bu kapsayıcıya belirli bir boşluk (gap), hizalama (flexbox) gibi düzenlemeler yapabiliriz.
– <button class="magnetic-button">...</button>
Bu öğeler, sayfadaki etkileşimli butonlarımız. Her biri aynı sınıfa (magnetic-button) sahip. Böylece CSS ve JavaScript ile bu butonların tümüne aynı stil ve efektler kolayca uygulanabiliyor.
Buradaki içerikler (Tıkla, Başla, Devam Et) tamamen örnek amaçlıdır. Kullanıcının ihtiyacına göre kolayca değiştirilebilir.
Neden Sade Bir HTML Yapısı?
Sade ve semantik (anlamlı) bir HTML, projeni hem sürdürülebilir hem de erişilebilir kılar. Ayrıca stil (CSS) ve etkileşim (JavaScript) katmanlarını ayrı tutmak, kodlarının okunabilirliğini artırır ve hata ayıklamayı kolaylaştırır.
2. CSS ile Mıknatıs Etkili Butonlara Hayat Vermek
CSS, HTML yapı taşlarına renk, hareket, doku ve düzen katar. Kodumuzdaki mıknatıs etkisi de dahil olmak üzere, tüm görsel değişimler ve animasyonlar bu katmanda şekilleniyor. Şimdi adım adım her CSS bloğunu detaylı şekilde açıklayalım.
Stil Katmanımız:
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(135deg, #f4f4f9, #d7e1e7);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
}
.button-wrapper {
display: flex;
gap: 200px;
}
.magnetic-button {
position: relative;
border: none;
border-radius: 50px;
padding: 25px 50px;
font-size: 1.2rem;
color: #ffffff;
background: linear-gradient(135deg, #8e9eab, #6b7c93);
background-size: 100% 100%;
cursor: pointer;
transition: box-shadow 0.6s ease-in-out, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), background-size 0.5s ease, color 0.3s ease;
width: 200px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
font-family: 'Poppins', sans-serif;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.magnetic-button:hover {
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.2);
background-size: 150% 150%;
color: rgba(255, 255, 255, 0.8);
}
</style>
Code language: HTML, XML (xml)2.1. body Etiketi: Sayfanın Temeli
body {
margin: 0;
height: 100vh;
background: linear-gradient(135deg, #f4f4f9, #d7e1e7);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
}
Code language: CSS (css)margin: 0;: Sayfanın kenar boşluklarını sıfırlar. Böylece arka plan tam ekran kaplar.height: 100vh;: Görüntü yüksekliğini cihaz ekranının tamamına göre ayarlar.background: Sayfa arka planına 135 derecelik yumuşak bir degrade uygular. Renkler pastel tonlarda seçildiği için gözü yormaz ve modern bir his verir.display: flex; justify-content: center; align-items: center;: Sayfadaki tüm içeriği (burada buton grubu) hem yatay hem dikeyde ortalar.font-family: 'Poppins', sans-serif;: Modern, sade ve okunaklı bir yazı tipi olan Poppins ile genel yazı karakteri tanımlanır.
2.2. .button-wrapper: Butonların Konteyneri
.button-wrapper {
display: flex;
gap: 200px;
}
Code language: CSS (css)display: flex;: Butonları yatayda hizalar.gap: 200px;: Butonlar arasında sabit bir boşluk bırakır. Bu geniş aralık, mıknatıs efektinin hem işlevsel hem de görsel olarak rahat çalışmasını sağlar.
2.3. .magnetic-button: Mıknatıs Etkili Butonun Temel Stili
.magnetic-button {
position: relative;
border: none;
border-radius: 50px;
padding: 25px 50px;
font-size: 1.2rem;
color: #ffffff;
background: linear-gradient(135deg, #8e9eab, #6b7c93);
background-size: 100% 100%;
cursor: pointer;
transition: box-shadow 0.6s ease-in-out, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), background-size 0.5s ease, color 0.3s ease;
width: 200px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
font-family: 'Poppins', sans-serif;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
Code language: CSS (css)Satır satır ele alalım:
position: relative;: JavaScript ile yapılan animasyonlarda butonun pozisyonu referans alınabilsin diye gerekli.border: none;: Dış çizgiyi kaldırır. Daha sade bir görünüm için tercih edilir.border-radius: 50px;: Oval bir buton şekli elde edilir. Bu, modern tasarım estetiği ile uyumludur.padding: 25px 50px;: Buton içeriğinin (metnin) etrafındaki boşluğu belirler. Dikey ve yatay olarak bol padding, daha büyük ve “davetkar” bir buton hissi yaratır.font-size: 1.2rem;: Metin boyutu yeterince büyük tutularak okunabilirlik sağlanır.color: #ffffff;: Yazı rengi beyaz olarak belirlenmiştir.background: linear-gradient(...): Soft tonlarda bir geçişli arka plan. Gri-mavi geçiş, ciddiyet ve sadeliği yansıtır.background-size: 100% 100%;: Degradein butona tam oturmasını sağlar.cursor: pointer;: Fareyle üzerine gelindiğinde buton olduğu anlaşılır.transition: Butonun çeşitli durumlarda (hover, klik vb.) geçiş efektlerinin yumuşak olmasını sağlar.width&height: Sabit buton boyutu belirlenmiştir. Tutarlılık açısından önemlidir.display: flex; justify-content: center; align-items: center;: Metni butonun tam ortasına hizalar.transform-style: preserve-3d;: 3D dönüşümler sırasında perspektifin korunmasını sağlar.box-shadow: Hafif bir gölge vererek butonun arka plandan ayrılmasını sağlar.
2.4. .magnetic-button:hover: Kullanıcıyla Etkileşim Anı
.magnetic-button:hover {
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.2);
background-size: 150% 150%;
color: rgba(255, 255, 255, 0.8);
}
Code language: CSS (css)box-shadow: Hover durumunda butonun gölgesi büyür, böylece sanki “havalanıyormuş” gibi görünür.background-size: Degrade büyütülür, bu da animatif bir parlama efekti hissi verir.color: Yazı renginin opaklığı biraz düşürülür. Bu da mikro-animasyonlara katkı sağlar.
CSS’in Rolü Nedir?
Bu örnekte CSS, sadece estetik değil, kullanıcı deneyimiyle bütünleşik bir dinamiklik sağlar. Renklerin yumuşak seçimi, geçiş efektleri, gölge kullanımı ve yuvarlatılmış kenarlar; kullanıcıya modern, davetkar ve “canlı” bir arayüz sunar.
3. JavaScript ile Mıknatıs Etkisi: Etkileşimin Kalbi
Kullanıcı arayüzlerinde mikro etkileşimler günümüz web tasarımının vazgeçilmezidir. Bir butonun kullanıcıya tepki vermesi, onun deneyimini daha sezgisel ve eğlenceli hale getirir. Şimdi, adım adım bu mıknatıs etkisinin nasıl elde edildiğini birlikte inceleyelim.
İlk olarak tüm kod bloğunu aşağıya alalım, ardından satır satır açıklayalım:
<script>
const buttons = document.querySelectorAll('.magnetic-button');
buttons.forEach(button => {
let lastDeltaX = 0;
let lastDeltaY = 0;
button.addEventListener('mousemove', (e) => {
const rect = button.getBoundingClientRect();
const btnX = rect.left + rect.width / 2;
const btnY = rect.top + rect.height / 2;
const deltaX = e.clientX - btnX;
const deltaY = e.clientY - btnY;
lastDeltaX = deltaX;
lastDeltaY = deltaY;
const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);
const maxScale = 1.05;
const minScale = 1;
let scale = Math.max(minScale, maxScale - (distance / 400));
button.style.transform = `scale(${scale}) translate(${deltaX / 6}px, ${deltaY / 6}px) rotateX(${deltaY / 5}deg) rotateY(${deltaX / 5}deg)`;
});
button.addEventListener('mouseleave', () => {
const swing = [
{ transform: `translate(${lastDeltaX / 6}px, ${lastDeltaY / 6}px) rotateX(${lastDeltaY / 5}deg) rotateY(${lastDeltaX / 5}deg) scale(1)` },
{ transform: 'translate(0, 0) rotateX(0) rotateY(0) scale(1)' }
];
button.animate(swing, {
duration: 500,
easing: 'ease-out'
});
button.style.transform = 'scale(1)';
});
button.addEventListener('mousedown', () => {
button.style.transition = 'transform 0.1s ease';
button.style.transform += ' scale(1.02)';
});
button.addEventListener('mouseup', () => {
button.style.transform = 'scale(1)';
});
});
</script>
Code language: HTML, XML (xml)3.1. Tüm Butonları Seçme
const buttons = document.querySelectorAll('.magnetic-button');
Code language: JavaScript (javascript)Bu satır, .magnetic-button sınıfına sahip tüm butonları seçerek bir liste (NodeList) oluşturur. Böylece birden fazla butona aynı davranış uygulanabilir hale gelir.
3.2. Her Buton İçin Etkileşim Tanımlama
buttons.forEach(button => {
Code language: JavaScript (javascript)Her bir buton için aşağıdaki olay dinleyicileri (event listener) tanımlanır: mousemove, mouseleave, mousedown ve mouseup.
3.3. mousemove: Mıknatıs Etkisini Başlatan Kısım
button.addEventListener('mousemove', (e) => {
Code language: JavaScript (javascript)Kullanıcının imleci butonun üzerinde hareket ettikçe çağrılır. Burada yapılan işlemler:
a) Butonun Merkez Koordinatlarını Hesapla
const rect = button.getBoundingClientRect();
const btnX = rect.left + rect.width / 2;
const btnY = rect.top + rect.height / 2;
Code language: JavaScript (javascript)Butonun ekran üzerindeki konumu ve boyutlarına göre, merkez noktası bulunur.
b) Fare ile Buton Merkezi Arasındaki Mesafeyi Al
const deltaX = e.clientX - btnX;
const deltaY = e.clientY - btnY;
Code language: JavaScript (javascript)Fare koordinatları ile butonun merkezi arasındaki X ve Y farkları alınır.
c) Mesafeye Göre Butonun Ölçeğini Hesapla
const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);
const maxScale = 1.05;
const minScale = 1;
let scale = Math.max(minScale, maxScale - (distance / 400));
Code language: JavaScript (javascript)Fare butona yaklaştıkça scale değeri artar ve buton hafifçe büyür.
d) Butonu Hareket Ettir ve Döndür
button.style.transform = `scale(${scale}) translate(${deltaX / 6}px, ${deltaY / 6}px) rotateX(${deltaY / 5}deg) rotateY(${deltaX / 5}deg)`;
Code language: JavaScript (javascript)İmlece doğru hafifçe kayar, büyür ve döner. İşte bu, “mıknatıs etkisi” olarak hissettiğimiz şeydir.
3.4. mouseleave: Fare Butondan Ayrılınca
button.addEventListener('mouseleave', () => {
const swing = [
{ transform: `translate(${lastDeltaX / 6}px, ${lastDeltaY / 6}px) rotateX(${lastDeltaY / 5}deg) rotateY(${lastDeltaX / 5}deg) scale(1)` },
{ transform: 'translate(0, 0) rotateX(0) rotateY(0) scale(1)' }
];
button.animate(swing, {
duration: 500,
easing: 'ease-out'
});
button.style.transform = 'scale(1)';
});
Code language: JavaScript (javascript)Fare buton üzerinden çıkınca, dönüş ve hareketler yumuşak bir şekilde eski haline döner. Bu geçiş, bir “yay gibi geri salınma” hissi verir.
3.5. moudown ve mouseup: Tıklama Etkisi
button.addEventListener('mousedown', () => {
button.style.transition = 'transform 0.1s ease';
button.style.transform += ' scale(1.02)';
});
button.addEventListener('mouseup', () => {
button.style.transform = 'scale(1)';
});
Code language: JavaScript (javascript)Kullanıcı butona bastığında küçük bir “büyüme” efekti verir. Bu, fiziksel bir tıklama hissi yaratır. Tıklama bittiğinde eski haline döner.
3.6. JavaScript’teki Genel Düşünce
Bu JavaScript yapısı, oldukça sade ama etkili. Her hareket kullanıcı davranışına anında tepki veriyor ve bu da etkileşimi son derece doğal hissettiriyor.
- Matematiksel hareket:
deltaXvedeltaYkullanılarak gerçek zamanlı mesafeye göre animasyonlar ayarlanıyor. - Duyarlı yapı: Buton her hareketi hissediyor. Kullanıcının eylemine göre tepki veriyor.
- Animasyon ve hız dengesi:
transform,transitionveanimatekullanımları sayesinde hem akıcı hem de tepki süresi kısa tutuluyor.
Bu JavaScript kısmı ile artık “buton” ifadesi bile yetersiz kalıyor. Çünkü bu yapı artık neredeyse dijital bir organizma gibi davranıyor. Kullanıcının yaklaşımına göre şekil değiştiriyor, tepki veriyor ve ona özel bir etkileşim sunuyor.
Sonuç olarak, bu üç katman – HTML, CSS ve JavaScript – birlikte çalışarak hem estetik, hem sezgisel hem de interaktif bir deneyim sunuyor.
4. Mıknatıs Etkili Butonun Genişletilmesi ve Geliştirilmesi
Şu ana kadar oluşturduğumuz yapı bir temel niteliğinde. Gerçek dünyadaki projelerde bu temel üzerine yeni özellikler, davranışlar veya tasarımsal detaylar ekleyerek çok daha etkileyici sonuçlara ulaşmak mümkün. Bu bölümde, bu yapıyı nasıl genişletebileceğimizi keşfedeceğiz.
4.1. Farklı Buton Stilleri Eklemek
Aynı mıknatıs etkisini koruyarak farklı buton türleri eklemek mümkün. Örneğin:
- İkonlu butonlar
- Yalnızca çerçeveli (outline) butonlar
- Minimalist (ghost) butonlar
Bu butonların her biri, class düzeyinde ayırt edilebilir. Örnek:
<button class="magnetic-button ghost">Şeffaf</button>
Code language: HTML, XML (xml)Ve CSS kısmında:
.ghost {
background: transparent;
color: #6b7c93;
border: 2px solid #6b7c93;
}
.ghost:hover {
background-color: rgba(107, 124, 147, 0.1);
}
Code language: CSS (css)Bu şekilde, aynı davranışı paylaşan ama görünüm açısından farklılaşan buton çeşitleri tanımlayabiliriz.
4.2. Mobil Uyum ve Dokunmatik Cihazlar
Mobil cihazlarda mousemove olayı çalışmaz çünkü orada “fare” yoktur. Bu tür cihazlarda alternatif olarak:
touchstartvetouchendolaylarını kullanabilirsiniz.- Ya da mobilde mıknatıs etkisini devre dışı bırakıp sadece sade bir tıklama efekti sunabilirsiniz.
Örnek mobil kontrolü:
if (window.innerWidth > 768) {
// fareye duyarlı mıknatıs kodlarını buraya koy
}
Code language: JavaScript (javascript)Bu sayede sadece masaüstü kullanıcıları için mıknatıs etkisini etkinleştirirsiniz.
4.3. Performans ve Optimize Edilmiş Hareketler
Gerçek zamanlı mousemove olayları, çok sayıda DOM manipülasyonu içerdiğinden performansa etki edebilir. Bunu azaltmak için:
requestAnimationFrameile güncellemeleri senkronize edebilirsiniz.- Daha az dönüşüm ve animasyon uygularsınız.
- Harekete duyarlı bölgeleri azaltabilirsiniz.
Örneğin:
let animationFrameId;
button.addEventListener('mousemove', (e) => {
if (animationFrameId) cancelAnimationFrame(animationFrameId);
animationFrameId = requestAnimationFrame(() => {
// dönüşüm hesaplaması burada yapılır
});
});Code language: JavaScript (javascript)Bu, tarayıcının repaint süreciyle animasyonları hizalayarak daha akıcı sonuç verir.
4.4. Erişilebilirlik (Accessibility)
Her modern arayüz gibi bu butonların da erişilebilir olması önemlidir. Örneğin:
aria-labeleklemektabindexile klavye gezinmesine izin vermek- Tıklanabilir olduğunun görsel ipuçlarıyla belirtilmesi
Örnek HTML:
<button class="magnetic-button" aria-label="Devam Et" tabindex="0">Devam Et</button>
Code language: HTML, XML (xml)Bu sayede görme engelli kullanıcılar da ekran okuyucu ile bu butonları algılayabilir.
4.5. Işık ve Gölge Efektleri ile Derinlik Katmak
3D dönüşümler zaten kullanıldı, ancak bu dönüşümleri destekleyen bir ışık simülasyonu eklemek tasarımı bir seviye daha yukarı taşır.
Örneğin, farenin konumuna göre gölgelendirme yapılabilir:
const lightIntensity = Math.min(0.3, distance / 500);
button.style.boxShadow = `${-deltaX / 10}px ${-deltaY / 10}px 20px rgba(0,0,0,${lightIntensity})`;
Code language: HTML, XML (xml)Bu, bir “ışık kaynağına göre hareket eden obje” etkisi yaratır.
4.6. Ses Efekti ile Etkileşimi Zenginleştirme
Bir diğer opsiyon da kullanıcıya sesli geri bildirim vermek. Butona tıklandığında veya üzerine gelindiğinde küçük bir “blip” ya da “click” sesi oynatabilirsiniz:
const audio = new Audio('click.mp3');
button.addEventListener('click', () => {
audio.play();
});
Code language: JavaScript (javascript)Bu tarz mikro detaylar, kullanıcı deneyimini oldukça geliştirir.
4.7. Temaya Uyum: Karanlık Mod Desteği
Soft tonlarda modern bir tasarım yaparken karanlık mod desteğini de unutmamak gerekir:
@media (prefers-color-scheme: dark) {
body {
background: linear-gradient(135deg, #1e1e2f, #2c2c3c);
}
.magnetic-button {
background: linear-gradient(135deg, #3c4b57, #5b6c7e);
color: #ffffff;
}
}
Code language: CSS (css)Kullanıcının sistem tercihini dikkate alarak arka plan ve buton renklerini otomatik değiştirmek profesyonel bir dokunuştur.
4.8. Uygulama Alanları: Nerelerde Kullanılır?
Bu tür butonlar özellikle şu alanlarda etkili olur:
- Açılış sayfalarında (landing page) dikkat çekici çağrı butonları
- Portföy sitelerinde etkileyici geçiş efektleri
- Ürün sayfalarında kullanıcı dikkatini toplamak için
- Oyun veya yaratıcı projelerde eğlenceli arayüzler
Özetle, kullanıcı dikkatini yakalamak ve sezgisel etkileşim sağlamak istediğiniz her yerde bu yapıyı kullanabilirsiniz.
5. Demo
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Modern Etkileşimli Butonlar</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(135deg, #f4f4f9, #d7e1e7);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
}
.button-wrapper {
display: flex;
gap: 200px;
}
.magnetic-button {
position: relative;
border: none;
border-radius: 50px;
padding: 25px 50px;
font-size: 1.2rem;
color: #ffffff;
background: linear-gradient(135deg, #8e9eab, #6b7c93);
background-size: 100% 100%;
cursor: pointer;
transition: box-shadow 0.6s ease-in-out, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), background-size 0.5s ease, color 0.3s ease;
width: 200px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
font-family: 'Poppins', sans-serif;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2)
}
.magnetic-button:hover {
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.2);
background-size: 150% 150%;
color: rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<div class="button-wrapper">
<button class="magnetic-button">Tıkla</button>
<button class="magnetic-button">Başla</button>
<button class="magnetic-button">Devam Et</button>
</div>
<script>
const buttons = document.querySelectorAll('.magnetic-button');
buttons.forEach(button => {
let lastDeltaX = 0;
let lastDeltaY = 0;
button.addEventListener('mousemove', (e) => {
const rect = button.getBoundingClientRect();
const btnX = rect.left + rect.width / 2;
const btnY = rect.top + rect.height / 2;
const deltaX = e.clientX - btnX;
const deltaY = e.clientY - btnY;
lastDeltaX = deltaX;
lastDeltaY = deltaY;
const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);
const maxScale = 1.05;
const minScale = 1;
let scale = Math.max(minScale, maxScale - (distance / 400));
button.style.transform = `scale(${scale}) translate(${deltaX / 6}px, ${deltaY / 6}px) rotateX(${deltaY / 5}deg) rotateY(${deltaX / 5}deg)`;
});
button.addEventListener('mouseleave', () => {
const swing = [
{ transform: `translate(${lastDeltaX / 6}px, ${lastDeltaY / 6}px) rotateX(${lastDeltaY / 5}deg) rotateY(${lastDeltaX / 5}deg) scale(1)` },
{ transform: 'translate(0, 0) rotateX(0) rotateY(0) scale(1)' }
];
button.animate(swing, {
duration: 500,
easing: 'ease-out'
});
button.style.transform = 'scale(1)';
});
button.addEventListener('mousedown', () => {
button.style.transition = 'transform 0.1s ease';
button.style.transform += ' scale(1.02)';
});
button.addEventListener('mouseup', () => {
button.style.transform = 'scale(1)';
});
});
</script>
</body>
</html>
Code language: HTML, XML (xml)
Henüz yorum yok