مقدمة
تصميم واجهة المستخدم للموقع الإلكتروني هو عنصر أساسي في تحقيق تجربة ممتعة وجذابة للزائرين. من بين العناصر البسيطة ولكن ذات التأثير الكبير، تأتي الأزرار التي تلعب دورًا هامًا في توجيه المستخدمين وتنفيذ المهام. باستخدام مكتبة Font Awesome، يمكنك تحسين شكل ومظهر أزرار موقعك الإلكتروني بطريقة إبداعية وسهلة التنفيذ.
الخطوة الأولى: لوحة التحكم
1 قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر:
2 انتقل للمدونة >> ثم إلى المظهر >> ثم اضغط على تحرير Edit HTML
3 اضغط في وسط محرر الأكواد ثم f + ctrl لإظهار مربع البحث
4 باستعمال الزر c + ctrl للنسخ و v + ctrl للصق قم بوضع الأكواد في المكان المناسب
الخطوة الثانية: تركيب الأكواد
قم بالبحث عن هذا الوسم ]]></b:skin> ضع فوقه كود التالي
a.buttonhcv {
background-size: 300% 100%!important;
background: linear-gradient(-225deg,#7742B2 0%,#F180FF 52%,#FD8BD9 100%);
position: relative;
display: inline-block;
height: 45px;
line-height: 45px;
padding: 0 30px;
font-size: 14px;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 5px;
cursor: pointer;
margin: 15px 10px;
text-transform: uppercase;
box-shadow: 4px 4px 15px rgba(0,0,0,0.1);
font-weight: 500;
}
a.buttonhcv:hover{
opacity: .8;
color: #fff;
transition: .3s;
}
.buttonhcv:before {
font-family: "Font Awesome 5 Pro","Font Awesome 5 Brands";
font-weight: 900;
display: inline-block;
margin: 0 5px 0 0;
margin-left: -30px;
}
.buttonhcv.demohcv:before {
content: '\f06e';
display: inline-block;
margin-right: 30px;
background: rgba(0,0,0,0.18);
border-radius: 5px 0 0 5px;
width: 45px;
}
a.buttonhcv.demohcv {
background: linear-gradient(135deg,#ff4c2e 0%,#f9a82f 45%,#ff4c2e 77%,#f7352e 100%);
}
نسخ
زر التحميل:
<a class="buttonhcv downloadhcv" href="link button" rel="nofollow" target="_blank">Download</a>
نسخ
زر المعاينة:
<a class="buttonhcv demohcv" href="link button" rel="nofollow" target="_blank">Demo</a>
نسخ
المصدر: مدونة فوتوماكس
تصميم واجهة المستخدم للموقع الإلكتروني هو عنصر أساسي في تحقيق تجربة ممتعة وجذابة للزائرين. من بين العناصر البسيطة ولكن ذات التأثير الكبير، تأتي الأزرار التي تلعب دورًا هامًا في توجيه المستخدمين وتنفيذ المهام. باستخدام مكتبة Font Awesome، يمكنك تحسين شكل ومظهر أزرار موقعك الإلكتروني بطريقة إبداعية وسهلة التنفيذ.
يجب عليك
تسجيل الدخول
او
تسجيل لمشاهدة الرابط المخفي
يجب عليك
تسجيل الدخول
او
تسجيل لمشاهدة الرابط المخفي
إضافة أزرار تحميل ومعاينة بأيقونة الخط Font Awesome
ما هي مكتبة Font Awesome؟
Font Awesome هي مكتبة مفتوحة المصدر تضم مجموعة واسعة من الأيقونات القابلة للتخصيص. توفر هذه المكتبة أيقونات بأحجام وألوان وأساليب مختلفة، مما يجعلها أداة مثالية لتصميم واجهات مواقع الويب.فوائد استخدام Font Awesome مع الأزرار
- التصميم الجذاب: تضيف الأيقونات لمسة بصرية تجعل الأزرار أكثر جاذبية واحترافية.
- تحسين تجربة المستخدم: تساعد الأيقونات في إيصال الغرض من الزر بوضوح وسرعة.
- سهولة التخصيص: يمكنك تعديل الأيقونات بسهولة لتتناسب مع تصميم موقعك.
- تحميل سريع: Font Awesome خفيفة الوزن ولا تؤثر بشكل كبير على سرعة تحميل الموقع.
كيفية إضافة Font Awesome إلى موقعك
إضافة مكتبة Font Awesome:
يمكنك إضافة المكتبة عن طريق تضمين الرابط التالي في قسم <head> من ملف HTML الخاص بموقعك:
يجب عليك
تسجيل الدخول
او
تسجيل لمشاهدة الاقتباس المخفي
نسختخصيص الازرار باستخدام CSS:
ملاحظات مهمة:
يُفضل دائمًا أخذ نسخة احتياطية من القالب قبل إجراء أي تعديلات لضمان عدم فقدان البيانات في حال حدوث خطأ.لتحسين مظهر الزر، يمكنك إضافة التنسيق التالي:
تركيب الاكواد
الخطوة الأولى: لوحة التحكم
1 قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر:
2 انتقل للمدونة >> ثم إلى المظهر >> ثم اضغط على تحرير Edit HTML
3 اضغط في وسط محرر الأكواد ثم f + ctrl لإظهار مربع البحث
4 باستعمال الزر c + ctrl للنسخ و v + ctrl للصق قم بوضع الأكواد في المكان المناسب
الخطوة الثانية: تركيب الأكواد
قم بالبحث عن هذا الوسم ]]></b:skin> ضع فوقه كود التالي
a.buttonhcv {
background-size: 300% 100%!important;
background: linear-gradient(-225deg,#7742B2 0%,#F180FF 52%,#FD8BD9 100%);
position: relative;
display: inline-block;
height: 45px;
line-height: 45px;
padding: 0 30px;
font-size: 14px;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 5px;
cursor: pointer;
margin: 15px 10px;
text-transform: uppercase;
box-shadow: 4px 4px 15px rgba(0,0,0,0.1);
font-weight: 500;
}
a.buttonhcv:hover{
opacity: .8;
color: #fff;
transition: .3s;
}
.buttonhcv:before {
font-family: "Font Awesome 5 Pro","Font Awesome 5 Brands";
font-weight: 900;
display: inline-block;
margin: 0 5px 0 0;
margin-left: -30px;
}
.buttonhcv.demohcv:before {
content: '\f06e';
display: inline-block;
margin-right: 30px;
background: rgba(0,0,0,0.18);
border-radius: 5px 0 0 5px;
width: 45px;
}
a.buttonhcv.demohcv {
background: linear-gradient(135deg,#ff4c2e 0%,#f9a82f 45%,#ff4c2e 77%,#f7352e 100%);
}
استخدام كود HTML في المقالة لإنشاء زر التحميل او زر العرض .
اختر احد الاكواد او كلاهما الموضح أدناه لإنشاء الزر الذي تريد إظهاره.زر التحميل:
<a class="buttonhcv downloadhcv" href="link button" rel="nofollow" target="_blank">Download</a>
زر المعاينة:
<a class="buttonhcv demohcv" href="link button" rel="nofollow" target="_blank">Demo</a>
نصائح لإبداعية أكبر
- اختيار الألوان: استخدم ألوانًا متناسقة مع هوية موقعك.
- استخدام الرسوم المتحركة: أضف تأثيرات انتقالية مثل تغيير اللون أو الحجم عند مرور المؤشر.
- التجاوب: تأكد من أن الأزرار تعمل بشكل جيد على مختلف الأجهزة.
- تنويع الأيقونات: استخدم أيقونات مختلفة لتوضيح الغرض من كل زر بوضوح.
المصدر: مدونة فوتوماكس
التعديل الأخير بواسطة المشرف:
