أفضل زر متدرج متحرك بجانب متوهج – تصميم احترافي بلغة CSS و HTML

هل تبحث عن زر احترافي لموقعك يجذب الزائر ويضيف لمسة جمالية؟ في هذا المقال سنقدم لك زر متدرج متحرك (Animated Gradient Button) مع تأثير Glow متوهج، تم تصميمه باستخدام HTML وCSS فقط، بدون أي JavaScript. هذا التصميم مناسب لمدونات بلوجر، مواقع WordPress، أو أي موقع حديث يحتاج لأزرار تفاعلية وعصرية.

لماذا تعتبر الأزرار المتحركة مهمة؟

في تصميم واجهات الويب الحديثة، الأزرار التفاعلية أصبحت عنصر أساسي في تجربة المستخدم:

1. جذب الانتباه: الزائر يلاحظ الزر مباشرة ويعرف أنه قابل للنقر.

2. تحسين تجربة المستخدم: زر جذاب يعطي شعورًا بالاحترافية والثقة.

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

4. تناسب مع الهوية البصرية: الألوان المتدرجة يمكن تعديلها لتتناسب مع هوية موقعك أو شعارك.

مميزات الزر المتدرج المتحرك

هذا الزر يحتوي على عدة خصائص احترافية تجعله مميزًا:

✔ تدرج ألوان احترافي: حركة الألوان جذابة وتلفت الانتباه للزر.
✔ تأثير Glow خارجي: يعطي إحساسًا باللمعان دون أي إضافات خارجية.
✔ متجاوب مع جميع الأجهزة: يعمل على الموبايل، التابلت، والكمبيوتر.
✔ بدون JavaScript: خفيف جدًا، يعتمد على CSS فقط، سريع التحميل.
✔ سهل التخصيص: يمكنك تعديل النص، الألوان، أو التأثيرات بسهولة.
✔ تأثير Hover تفاعلي: عند تمرير الماوس، تتسارع حركة الألوان ويكبر الزر قليلًا.
✔ متوافق مع بلوجر وWordPress: يمكن استخدامه بسهولة في أي قالب.

كيفية استخدام الزر في موقعك

1- انسخ الكود الخاص بالـ HTML والصقه في المكان الذي تريد ظهور الزر فيه:

<button>Allito App</button> نسخ الكود

2- انسخ كود الـ CSS والصقه داخل ملف الـ CSS أو داخل <style> في الصفحة:

:root { --m: 4rem; --red: #ff6565; --pink: #ff64f9; --purple: #6B5fff; --bule: #4d8AFF; --green: #5bff89; --yellow: #ffee55; --orange: #ff6d1b; } body { background-color: #141516; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; } button { width: 380px; height: 110px; border: calc(0.08 * var(--m)) solid transparent; position: relative; color: #f3f3f3; font-family: 'Space Grotesk'; font-size: var(--m); border-radius: calc(0.7 * var(--m)); padding: calc(0.5 * var(--m)) clac(1 * var(--m)); display: flex; justify-content: center; cursor: pointer; background: linear-gradient(#121213, #121213), linear-gradient(#121213 50%, rgb(18, 19, 1) 80%, rgba(18, 18, 19, 0)), linear-gradient(90deg, var(--orange), var(--yellow), var(--green), var(--bule), var(--purple), var(--pink), var(--red)); background-origin: border-box; background-clip: padding-box, border-box, border-box; background-size: 200%; animation: animate 2s infinite linear; } button::before { content: ""; background: linear-gradient(90deg, var(--orange), var(--yellow), var(--green), var(--bule), var(--purple), var(--pink), var(--red)); height: 30%; width: 60%; position: absolute; bottom: -20%; z-index: -5; background-size: 200%; animation: animate 2s infinite linear; filter: blur(calc(0.8 * var(--m))); } button:hover, button:hover::before { animation: animate 0.5s infinite linear; } @keyframes animate { 0% { background-position: 0 } 100% { background-position: 200% } } @media screen and (max-width: 1000px) { :root { --m: 2rem; } } نسخ الكود

3- احفظ التغييرات وشاهد الزر يظهر بتأثيره الجذاب على موقعك.

نصائح لتخصيص الزر

• تغيير النص: استبدل EXPLORE بأي نص آخر يناسب موقعك، مثل تحميل أو اشترك.

• تغيير الألوان: يمكنك تعديل تدرجات اللون لتتناسب مع هوية الموقع أو شعارك.

• تغيير الحجم: لتغيير حجم الزر، عدّل padding وfont-size في الـ CSS.

• إضافة تأثيرات إضافية: مثل دوران أو حركة عند الضغط، يمكن إضافتها بسهولة باستخدام CSS إضافي.

أماكن استخدام الزر في موقعك

• الأزرار الرئيسية: مثل “تحميل” أو “تسجيل”.

• الأزرار في الهيدر أو الفوتر: لإبراز روابط مهمة.

• صفحات المنتجات أو الخدمات: لجذب المستخدم للنقر على المنتجات أو الاشتراك.

• نماذج التسجيل أو الاشتراك في النشرة الإخبارية: لزيادة التفاعل.

خلاصة

الزر المتدرج المتحرك مع تأثير Glow هو إضافة رائعة لأي موقع حديث.

• سريع وخفيف على الصفحة.

• يعمل على جميع الأجهزة.

• يضيف لمسة عصرية وجذابة للزائر.

• مناسب للمدونات، المواقع التقنية، ومحافظ الأعمال.

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