عزيزي القارئ هل تريد تعلم تصميم زر جميل للمعاينة ويحمل بعض التأثيرات البسيطة عند الضغط عليه؟
اذا كانت الاجابة نعم فقد حان الوقت لتبهر أصدقائك ومن هم حولك بكتابة أكواد css و html بسيطة يمكنك من خلالها عرض زر ويب جميل ويحمل بعض التاثيرات والألوان والأهم من ذلك انه ستكون انت من يقوم بتصميم وكتابة أكواد زر الويب وليس نحن نعم انت
اذا نظرت اثناء تنقلك في مواقع الويب قد ترا ان اشهر المواقع واغلبها يقومون باستخدام أشكال وتصاميم بسيطة جدا للأزرار وقد لاتحمل الكثير من تأثيرات css وانما يقومون بتصميم وفقط الأزرار البسيطة التي تحتاجها كمستحدم للتمييز بين أجزاء الموقع
للملاحظة يوجد شرح بالفيديو في نهاية المقالة لزيادة التوضيح
والآن لنتحدث عن تصميمنا لهذه الأزرار ولنبدأ بما سنحتاجه للبدء في التصميم
الخطوة الأولى : الدخول لمحرر الأكواد
بالعادة ولتصميم اي من أزرار الويب سنحتاج الى برنامج يمكننا من خلاله كتابة الأكواد بكل سهولة ولكن ولتوفير الوقت يمكنك استخدام محرر الاكواد اون لاين اي انك لن تحتاج الى تحميل اي برنامج وانما يمكنك كتابة الاكواد من هذا الموقع مباشرة قم بفتح محرر الاكواد في نافذة جانبية حاليا ليسهل لك العودة اليه لاحقا
الخطوة الثانية : استخدام أكواد Html
من المهم ان نذكر اننا سنقوم بكتابة نوعين من الأكواد وهما css وأيضا html وتعتبر اللغتان من أسهل انواع لغات البرمجة في وقتنا الحالي
ولنبدا أولا بأكواد html
من الممكن القول اننا وباستخدام هذه اللغة سنقوم بإنشاء أساس البناء لزر الويب اي بدونها لن نستطيع انشاء اي من ازرار المواقع
ويوجد الكثير من الاوامر التي تستخدم لإنشاء الازرار ولكن سنتحدث عن الاوامر الاكثر شيوعا واستخداما وهو الامر a حيث يتم استخدامه وبشكل اساسي مع الروابط التي نريد تضمينها في الموقع
سنقوم بكتابة الامر a في جسم الموقع اي ضمن الكود body وفي المكان المخصص الذي نريد ان يظهر فيه الزر
<html>
<head>
</head>
<body>
<a> </a>
</body>
</html>
هنالك بعض الخصائص التي يمكنك تضمينها مع الكود حسب الرغبة وهي كالاتي
<a herf="www.google.com"> </a>باستخدام هذه الميزة يمكنك ادراج الرابط الذي تريده وكتابته بين القوسين
<a target="_blank or _self"> </a>اي التوجيه فيمكنك ادراج القيمة blank_ لفتح الرابط في نافذة جديدة او self_ لفتح الرابط في نفس نافذة المتصفح
<a rel="nofollow"> </a>يمكنك اضافة هذه الخاصية اذاكان الرابط الذي قمت باضافته هو رابط خارجي اي من خارج موقعك
<a> clickme </a>بين القوسين ستقوم بكتابة العبارة التي تريدها ان تظهر للزائر على سبيل المثال اضغط هنا او اضغط للتحميل
<a class="my-button"> </a>Class ستحتاج هذه الخاصية لتعريف الامر a وعند كتابتك لاكواد ال css
لذالك قم بكتابة اي قيمة تريدها ولكن باحرف انجليزية فقط وبدون الارقام والاشكال الخاصة
بعد الانتهاء من جميع الخيارات سيكون الأمر a ظاهرا كما في المثال التالي
<html>
<head>
</head>
<body>
<a herf="www.google.com" target="_blank" rel="nofollow" class="my-button"> clickme </a>
</body>
</html>
والان اصبح بامكانك الانتقال للخطوة الثالثة
أفضل 10 أزرار css جاهزة للتحميل مجانا أزرار الويب Html بأكواد خفيفة للمعاينة والمشاركةالخطوة الثالثة : كتابة أكواد Css لتصميم زر الويب
حان الوقت لاضافة بعض التاثيرات الجمالية وبهذا الصدد انا اتحدث عن اللغة المحبوبة لدى الصممين وهي اكواد css
في الحقيقة يوجد الكثير من الاوامر التي يمكنك اضافتها وتخصيص تصميمك بها لذلك سأحاول بقدر المستطاع ان اغطي على اهم الخصائص التي سنحتاجها لتصميم زر css بسيط
وبما اننا سنستخدم الان لغة مختلفة عن html سنحتاج الى التعريف للمتصفح اننا سنقوم بكتابة اكواد من لغة css ولتعريف المتصفح بذلك سنقوم بكتابة الامر style
<style>
</style>
<a herf="www.google.com" target="_blank" rel="nofollow" class="my-button"> clickme </a>
ضمن الأمر style سنقوم بكتابة بعض الاكواد التي سنختارها لتصميم زر الويب حسب الرغبة وللتعريف سنقوم بكتابة اسم Class الحاص بالزر مسبوقنا بنقطة
<style>
.mybutton {
}
</style>
وسنقوم بكتابة اسماء بعض التاثيرات وادخال القيم المناسبة لكل كود بين القوسين المعقوفين وهي كالاتي
<style>
.mybutton {
لون خلفية الزر
background: color;
لون النص الظاهر بداخل الزر
color: color;
الإطار الخارجي
border: px solid color;
انحناء اطراف الاطار الخارجي
border-radius: px;
حجم النص
font-size: px;
سمك النص غامق
font-weight: bold;
عرض الزر
width: px;
طول الزر
height: 50px;
ارتفاع النص بداخل الزر ينصح ان يكون بنفس قيم طول الزر
line-height: 50px;
الشفافية
opacity: 1 or 2;
ازالة جميع التاثيرات التلقائية من الزر
text-decoration: none;
موقع الزر في الصفحة ويمكنك اضافة اكثر من قيمة ولكن يجب عليك المراعاة في استخدام هذه الخاصية فالتعامل معها معقد قليلا
position: relative or absolute or fixed or static;
وايضا اذا قمت باستخدام الميزة position ستحتاج الى التخلي عن العرض والطول وستستبدلها بالابعاد
top: px or %;
bottom: px or %;
right: px or %;
left: px or %;
وايضا في بعض الحالات ستحتاج الى كتابة نص اضافي باستخدام هذه الميزة
content: 'text';
هذه الميزة ستساعدك على اختيار مكان ظهور الزر ايضا وتعتبر سهلة الاستخدام
display: inline or block or inline-block or flex or none;
}
</style>
والان ستكون الاكواد الخاصة بنا مشابهة للآتي
.mybutton {
background: #000000;
color: #ffffff
border: 2px solid #ffffff;
border-radius: 10px;
font-size: 20px;
font-weight: bold;
width: 200px;
height: 50px;
line-height: 50px;
text-decoration: none;
}
اعلم انها ستكون خطوة صعبة قليلا في البداية ولكن سيسهل عليك الامر بعد الاعتياد عليها
يمكنك ايضا اضافة الخواص مثل شكل زر الويب قبل تمرير مؤشر الماوس وبعد تمرير المؤشر عليه مع التغير في بعض الخصائص مثل اللون ونحوه وتكتب كالتالي
<style>
.mybutton {
}
ستكتب اسم الكلاس بشكل عادي وستضيف له نفس هذا الامر ان اردت اضافة بعض الخصائص قبل تمرير مؤشر الماوس على الزر
.mybutton:before {
}
ستضيف هذا الامر ان اردت اضافة بعض الخصائص اثناء تمرير مؤشر الماوس على الزر
.mybutton:hover {
}
ستضيف هذا الامر ان اردت اضافة بعض الخصائص على الزر بعد تمرير مؤشر الماوس على الزر
.mybutton:after {
}
</style>
الخطوة الرابعة: عرض زر الويب في موقعنا
الآن وبعد ان انتهينا من كتابة جميع أكواد css و html لزر الويب أصبح من السهل عرض الزر في مدونتنا ونقله لمقالاتنا او حفظه ليسهل علينا الرجوع إليه متى رغبنا بذلك والآن وللتوضيح أكثر سنقوم باستعراض 3 أزرار مختلفة لتوضيح الأفكار
زر الويب الأول
الأكواد المستخدمة لعرض الزر
<a herf="#" target="_self" class="button-m"> اضغط للتحميل </a>
<style>
.button-m {
width: 260px;
height: 70px;
text-align: center;
text-decoration: none;
background: rgba(0, 0, 0, 0);
color: #c30909;
font-size: 30px;
font-weight: bold;
line-height: 60px;
border: 2px solid #c30909;
border-radius: 10px;
transition: 0.5s;
display: inline-block;
}
.button-m:hover {
background: #c30909;
color: #ffffff;
transition: 0.5s;
}
</style>
وسيكون شكل الزر كالآتي
زر ويب الثاني
الأكواد المستخدمة لعرض الزر
<a herf="#" target="_self" class="button-m"> اضغط هنا </a>
<style>
.button-s {
width: 260px;
height: 70px;
text-align: center;
text-decoration: none;
font-size: 30px;
font-weight: bold;
line-height: 70px;
border-radius: 10px;
transition: 0.5s;
display: inline-block;
position: relative;
}
.button-s:hover {
background: rgb(16, 142, 151);
color: #e2e2e2;
transition: 0.5s;
}
.button-s:before {
content: 'للتحميل';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(9 172 96);
color: #ffffff;
border-radius: 10px;
opacity: 1;
transition: 0.5s;
}
.button-s:hover:before{
opacity: 0;
transition: 0.5s;
filter: blur(40px);
}
</style>
وسيكون شكل الزر كالآتي
زر الموقع الثالث
الأكواد المستخدمة لعرض الزر
<a herf="#" target="_self" class="button-g"> اضغط هنا </a>
<style>
.button-g {
width: 260px;
height: 70px;
text-align: center;
font-weight: bold;
line-height: 70px;
border-radius: 10px;
transition: 0.5s;
display: inline-block;
position: relative;
color: #e2e1e1;
background: rgb(106, 28, 179);
}
.button-g:hover {
transition: 0.5s;
}
.button-g:before {
content: 'للتحميل';
position: absolute;
top: 0;
left: 0;
right: 40px;
bottom: 0;
background: black;
border-radius: 10px 0 0 10px;
transition: 0.5s;
}
.button-g:hover:before{
right: 220px;
transition: 0.5s;
color: transparent;
}
</style>
وسيكون شكل الزر كالآتي
شرح بالفيديو لكتابة أكواد Html و Css من الصفر لإنشاء وتصميم 3 أزرار للويب يمكنك استخدامها
يمكنك تحميل جميع ملحقات الشرح
وبهذا نكون قد انتهينا من شرحنا لهذا اليوم فأتمنى ان يكون قد نال على اعجابكم ورضاكم
اترككم في حفظ الله ورعايته - اترك تعليقك بأسفل المقالة
تعليقات
إرسال تعليق