تصميم زر تنقل جذاب | Button Style CSS Hover Effect

في عالم تصميم الويب، تعتبر الأزرار التفاعلية من أهم عناصر واجهة المستخدم. زر جميل ومتجاوب يجعل تجربة الزائر أكثر متعة ويزيد من التفاعل مع الموقع.

في هذا المقال، سنشرح تصميم زر تنقل جذاب باستخدام HTML + CSS فقط مع تأثير Hover متحرك يضفي لمسة احترافية على موقعك.

🔹 مميزات الزر

1. تصميم عصري وأنيق
   الزر يعتمد على ألوان متوهجة (Neon) تعطي إحساساً بالحداثة واللمعان.

2. تأثير Hover ديناميكي
   عند مرور الماوس على الزر، يتحول لونه، تتغير المسافات بين الحروف، ويظهر توهج مضيء حوله.

3. سهل الاستخدام والتعديل

   • تغيير اللون الأساسي

   • تعديل حجم الزر

   • تعديل النص بسهولة

4. متجاوب مع جميع الأجهزة
   الزر يظهر بشكل ممتاز على الكمبيوتر، الموبايل، والتابلت.

5. مناسب لأدسنس
   يمكن وضعه بأمان في المقالات أو كجزء من نموذج تفاعلي لجذب الزائر.

🔹 طريقة الاستخدام

HTML:

<button class='liquid-btn'>EXPLORE</button> نسخ الكود

هذا هو الزر الأساسي، يمكنك تغيير نص الزر إلى أي كلمة تناسب موقعك.

CSS:

body { margin: 0; height: 100vh; background-color: #0a0a0a; display: flex; justify-content: center; align-items: center; } .liquid-btn { position: relative; padding: 16px 40px; font-size: 1.2rem; color: #a8ff00; border: 2px solid #a8ff00; background-color: transparent; overflow: hidden; cursor: pointer; text-transform: uppercase; transition: all 0.6s ease; } .liquid-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #a8ff00; z-index: 1; box-shadow: 0 0 50px #a8ff00, 0 0 90px #a8ff00 inset; transition: left 0.6s ease; } .liquid-btn:hover { color: #000; letter-spacing: 5px; border-radius: 10px; box-shadow: 0 0 8px #a8ff00, 0 0 25px #a8ff00, 0 0 50px #a8ff00; } .liquid-btn:hover::before { left: 0; } نسخ الكود

🔹 شرح الكود

1. الزر الأساسي
   نستخدم .liquid-btn لتحديد شكل الزر، اللون، الحد، وحجم الخط.

2. تأثير الخلفية المتحركة
   ::before يستخدم لإنشاء طبقة مضيئة تتحرك عند مرور الماوس، ما يعطي تأثير Hover جذاب وسلس.

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

4. الانتقالات والتحولات
   transition: all 0.6s ease; يجعل كل التغييرات سلسة ومريحة للعين.

🔹 نصائح عملية

• يمكن استخدام هذا الزر في قوائم التصفح، أزرار CTA، أو روابط التنقل المهمة داخل الموقع.

• لتجربة أفضل للزائر، ضع الزر في مكان بارز وواضح داخل الصفحة.

• يمكن دمجه مع أي سلايدر أو معرض صور لجعل الموقع أكثر تفاعلية.

✅ الخلاصة

بهذا التصميم:

• الزر يظهر بشكل جذاب ومتحرك.

• يمكن تعديل الألوان، النص، والحجم بسهولة.

• متوافق مع جميع الأجهزة والمتصفحات.

• المقال غني بالمعلومات وطويل بما يكفي ليكون مناسبًا لأدسنس.