تحتاج إلى إنشاء زر مع تأثير على تحوم مع Elementor ?
إذا كان الأمر كذلك ، اجلس في هذه الحافلة الرائعة ، لأن ما سنحققه اليوم هو في الفيديو التالي:
لنقم بإنشاء صفحة ثم نقوم بتعديلها باستخدام Elementor، ثم حدد بنية مكونة من عمودين. في اللوحة ، دعنا نعدل القسم الذي تم إنشاؤه حديثًا عن طريق التحديد ارتفاع الحد الأدنى فورا الإستكبار وعلى الفور ارتفاع الحد الأدنى دعنا نضغط VH ثم اضبط المؤشر على 100.
في علامة التبويب الطراز دعنا نغير لون الخلفية إلى # 070e39.
في العمود الأول ، دعنا نسقط أداة الزر ، ونعدل نصها عن طريق الكتابة عرض التفاصيل ودعنا نحاذيها إلى اليمين
في علامة التبويب الطراز دعونا نعدلها أسلوب الطباعة عن طريق تغيير الحجم 15, تحول في أحرف كبيرة et تباعد الأحرف في 1.1
في علامة التبويب متقدم، تعديل الكل هوامش في 20 وفي القسم CSS مخصصة، فلنلصق الكود التالي الذي يضيف تدرجًا إلى الزر:
المحدد {
–Btn- العرض: 180 بكسل ؛
- ارتفاع BTN: 50 بكسل ؛
–Btn- الخلفية: # 0e1538 ؛
- الانحدار الأيسر: # F803F8 ؛
- الانحدار الأيمن: # 03F2FD ؛
}
المحدد أ {
;position: relative
العرض: var (–btn-width) ؛
الارتفاع: var (–btn-height) ؛
}
المحدد أ: قبل ،
المحدد أ: بعد {
سعيدة: "؛
;position: absolute
أقحم: 0 ؛
الانتقال: 0.5 ثانية ؛
}
المحدد أ: nth-child (1): قبل ،
selector a: nth-child (1): after {
الخلفية: التدرج الخطي (45 درجة ، فار (–تدرج يسار) ، var (–btn- خلفية) ، var (–btn-background) ، var (– right-gradient)) ؛
}
selector a: hover: before {
أقحم: -3 بكسل ؛
}
selector a: hover: after {
أقحم: -3 بكسل ؛
عامل التصفية: طمس (10 بكسل) ؛
}
محدد فترة {
;position: absolute
;top: 0
اليسار: 0
عرض: 100٪،
الارتفاع: 100٪؛
الخلفية: var (–btn-background) ؛
ض الفهرس: 10.
عرض: المرن.
تبرير المحتوى: المركز ؛
محاذاة البنود: مركز.
إخفاء الفائض؛
}
الآن إذا قمت بالمرور فوق الزر سوف تكتشف تأثيرات رائعة.
لإضافة تأثير زجاجي لامع على الزر ، دعنا نلصق الكود التالي أيضًا:
/ * تأثير زجاجي لامع * /
محدد فترة :: قبل {
سعيدة: "؛
;position: absolute
;top: 0
اليسار: -50٪؛
عرض: 100٪،
الارتفاع: 100٪؛
الخلفية: rgba (255,255,255,0.075،XNUMX،XNUMX،XNUMX) ؛
تحويل: انحراف (160 درجة) ؛
}
تلاحظ تأثيرًا جديدًا يجلب مزيدًا من الضوء على الزر.
اقرأ أيضا: كيفية إنشاء قسم أعضاء الفريق باستخدام Elementor
لنقم الآن بنسخ هذا الزر ولصقه في العمود الثاني. دعنا نغير محاذاة الزر إلى اليسار ونغير النص إلى شاهد المزيد.
الآن عليك فقط نشر عملك أو معاينته.
هنا 2 أزرار جميلة تم إنشاؤها.
احصل على Elementor Pro الآن!
وفي الختام
لذا ! هذا كل شيء في هذا البرنامج التعليمي الذي يوضح لك كيفية إنشاء زر مع تأثير التمرير بامتداد باني الصفحة Elementor. إذا كانت لديك أية مخاوف بشأن كيفية الوصول ، فأخبرنا بذلك تعليقات.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
