زرار تنقل بشكل احترافي الجزء 3

تصميم عصري بتأثير حركي مستوحى من Netflix

أزرار التنقل أصبحت عنصرًا أساسيًا في أي موقع أو تطبيق ويب حديث، فهي لا تقتصر فقط على التنقل بين الصفحات، بل أصبحت جزءًا مهمًا من تجربة المستخدم (UI/UX).

في هذا الجزء نقدم زر تنقل احترافي بتأثير حركي مميز مستوحى من تصميم Netflix، يمنح موقعك لمسة عصرية وحركة ناعمة تلفت انتباه الزائر بدون إزعاج.

فكرة التصميم

يعتمد هذا الزر على تأثير حركي ديناميكي يظهر عند مرور الماوس أو التفاعل مع الزر، حيث يتحرك التأثير بسلاسة مشابهة لتأثيرات أزرار Netflix في واجهتها الشهيرة.
الزر مصمم ليكون بسيطًا من حيث الشكل، قوي من حيث التأثير، وسهل الدمج داخل أي موقع أو قالب بلوجر.

مميزات زر التنقل

✔ تصميم عصري وحديث
✔ تأثير حركي ناعم مشابه لتأثير Netflix
✔ مناسب للمواقع الحديثة وصفحات الهبوط
✔ خفيف جدًا ولا يؤثر على سرعة الموقع
✔ متوافق مع جميع المتصفحات الحديثة
✔ يعمل بكفاءة على الكمبيوتر والموبايل
✔ قابل للتعديل (الألوان – الحجم – النص)
✔ كود منظم وسهل الفهم

لماذا هذا الزر مهم لموقعك؟

• يعزز تجربة المستخدم ويجعل التصفح أكثر سلاسة

• يجذب انتباه الزائر بدون استخدام مؤثرات مزعجة

• يعطي موقعك شكل احترافي قريب من المنصات العالمية

• مناسب لزر تحميل، انتقال، أو أي إجراء رئيسي (CTA)

حتى لو الصفحة بسيطة ولا تحتوي على بيانات كثيرة، وجود زر بتأثير احترافي يجعل الصفحة تبدو مكتملة وجاهزة للعرض والإعلانات.

التوافق مع أدسنس

هذا التصميم متوافق تمامًا مع سياسات Google AdSense لأنه:

• لا يحتوي على أي محتوى مخالف

• لا يتضمن خداع بصري للإعلانات

• لا يجبر المستخدم على الضغط

• يمكن وضعه بعيدًا عن أماكن الإعلانات

يفضّل دائمًا ترك مسافة واضحة بين زر التحميل وأي إعلان لضمان تجربة مستخدم سليمة.

أماكن الاستخدام المقترحة

• زر تحميل ملفات أو أدوات

• زر الانتقال لصفحة أخرى

• زر عرض المزيد من المحتوى

• صفحات الهبوط (Landing Pages)

• مدونات بلوجر والمواقع الشخصية

كيفية تركيب السلايدر

1. HTML

انسخ كود HTML الخاص بالـ button وضعه داخل المشاركة أو صفحة ثابتة:

<div class="container"> <a href="#" class="btn">Allito App</a> </div> نسخ الكود

2. CSS

أضف كود الـ CSS داخل تنسيق القالب أو داخل <style> لتصميم:

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); * { margin: 0px; padding: 0px; box-sizing: border-box; } body { font-family: "Poppins", serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #252432; overflow: hidden; } .btn { position: relative; width: 240px; height: 80px; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.2); border-radius: 10px; cursor: pointer; overflow: hidden; font-size: 2em; transition: 0.5s; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; color: #e50914; /* border: 1px solid #fff; */ } .btn:hover { filter: drop-shadow(0 0 10px #e50914) drop-shadow(0 0 30px #e50914); letter-spacing: 0.2em; color: #fff; } .btn span { position: absolute; top: 0; width: 2px; height: 100%; background: #e50914; pointer-events: none; transition: transform 0.2s ease-in-out; z-index: -1; transform: scaleY(0); transform-origin: bottom; } .btn:hover span { transform: scaleY(1); transform-origin: top; } .btn span:nth-child(even) { transform-origin: top; } .btn:hover span:nth-child(even) { transform-origin: bottom; } نسخ الكود

3. JavaScript مع Swiper

أضف مكتبة  JS عبر :

document.addEventListener("DOMContentLoaded", function () { let btns = document.querySelectorAll(".btn"); btns.forEach(function (btn) { let spans = []; for (let i = 0; i < 120; i++) { let span = document.createElement("span"); span.style.left = `${i * 2}px`; spans.push(span); btn.appendChild(span); let randomDealy = Math.random() * 1 + 0; span.style.transitionDelay = randomDealy + "s"; } }); }); نسخ الكود

الخلاصة

إذا كنت تبحث عن زر بسيط ولكن بتأثير بصري قوي، فهذا التصميم هو الاختيار المناسب.
تأثير الحركة المستوحى من Netflix يعطي إحساسًا بالفخامة والاحترافية، ويجعل موقعك يبدو حديثًا ومتطورًا بدون تعقيد في الكود.