Manyetik Buton

Önizleme

Düğmenin fare imleci tarafından çekilmiş gibi hareket ettiği benzersiz bir etkileşim sağlar. Animasyon, kullanıcı tarafından sergilendikten hemen sonra otomatik olarak oynatılacaktır.

Kullanım durumları ve özellikleri

• Yüksek etkili mikro etkileşim: Genel yol animasyonları ve parlama efektlerinden farklı olarak bu bileşen, fare izlemenin “manyetik kuvvet” konseptini içerir.

• Portföy/yaratıcı siteler için mükemmel: Ziyaretçilerinize küçük bir sürpriz sunarak dağıtım gücünüzü artırın.

• TO iyileştirme etkisi: Bunun CTA (Harekete Geçirici Mesaj) düğmelerine uygulanmasının, görüntüleme ve tıklama konusundaki psikolojik engelleri azaltma etkisine sahip olduğu düşünülmektedir.

• Yalnızca JavaScript ile elde edilir: Kitaplık gerekmez. “Mousemove” etkinliğinde “transform”u dinamik olarak güncelleyen basit bir uygulama.

Tasarım ve kullanıcı deneyiminin önemli noktaları

1. Fizik Tabanlı Geri Bildirim: İmlece çarpma riski yaratarak bir düğmenin etkileşimli bir öğe olduğunu sezgisel olarak iletin.

2. kübik-bezier(0,23, 1, 0,32, 1): Kolay çıkış tipi bir eğri kullanıldığında, düğme hareketi düzgün ve sıkı görünecektir.

3. Parıltı efekti: “::before” sözde öğesiyle akan ışık efektini elde edin.

4. Erişilebilirlik: “fare yaprağı” güvenilir bir şekilde orijinal konumuna döner, böylece klavyenin kullanımında veya dokunmatik cihazlarda herhangi bir sorun yaşanmaz.

Nasıl kişiselleştirilir

‘Güç’ değişkeninin değerini değiştirerek manyetik kuvvetin gücünü ayarlayabilirsiniz:

// 弱め（微妙な動き）

var strength = 0.15;



// 標準

// var strength = 0.35;



// 強め（大きく動く）

// var strength = 0.5;

Düğme rengini değiştirmek için “arka plan” CSS’sini değiştirmeniz yeterlidir:

/* サンセット */

background: linear-gradient(135deg, #f97316, #ef4444);



/* オーシャン */

background: linear-gradient(135deg, #06b6d4, #3b82f6);



/* エメラルド */

background: linear-gradient(135deg, #10b981, #059669);

Uygulama kodu

<button class="magnetic-btn" id="magnetic-btn">

HOVER ME

<span class="magnetic-btn-arrow">→</span>

</button>



<style>
.magnetic-btn {

position: relative;

padding: 18px 48px;

font-size: 1.1rem;

font-weight: 700;

letter-spacing: 0.1em;

color: white;

background: linear-gradient(135deg, #6366f1, #8b5cf6);

border: none;

border-radius: 50px;

cursor: pointer;

outline: none;

box-shadow: 0 20px 60px rgba(99,102,241,0.4);

transition: transform 0.15s cubic-bezier(0.23,1,0.32,1), box-shadow 0.3s ease;

display: inline-flex;

align-items: center;

gap: 10px;

overflow: hidden;

}

.magnetic-btn::before {

content: '';

position: absolute;

top: -50%;

left: -60%;

width: 40%;

height: 200%;

background: rgba(255,255,255,0.15);

transform: skewX(-20deg);

transition: left 0.5s ease;

pointer-events: none;

}

.magnetic-btn:hover::before { left: 120%; }

.magnetic-btn:hover {

box-shadow: 0 30px 80px rgba(139,92,246,0.6), 0 20px 60px rgba(99,102,241,0.4);

}

.magnetic-btn-arrow {

display: inline-flex;

transition: transform 0.3s ease;

pointer-events: none;

}

.magnetic-btn:hover .magnetic-btn-arrow { transform: translateX(4px); }
</style>



<script>

(function() {

var btn = document.getElementById('magnetic-btn');

if (!btn) return;

var strength = 0.35;

btn.addEventListener('mousemove', function(e) {

  var rect = this.getBoundingClientRect();

  var dx = e.clientX - (rect.left + rect.width / 2);

  var dy = e.clientY - (rect.top + rect.height / 2);

  this.style.transform = 'translate(' + (dx*strength) + 'px,' + (dy*strength) + 'px) scale(1.08)';

});

btn.addEventListener('mouseleave', function() {

  this.style.transform = '';

  this.style.boxShadow = '';

});

})();

</script>

Tarayıcı uyumluluk durumu

| Tarayıcı | Uyumluluk durumu |

|----------|----------|

| Krom 60+ | ✅ Tamamen uyumlu |

| Firefox 55+ | ✅ Tamamen uyumlu |

| Safari 10.1+ | ✅ Tamamen uyumlu |

| Kenar 79+ | ✅ Tamamen uyumlu |

Dokunmatik cihazlarda “mousemove” olayı başlatılmaz, bu nedenle mıknatıs efekti görüntülenmez ancak düğme her zamanki gibi tıklanabilir.