هذا الكود هو مثال لتصميم زرين (Buttons) باستخدام HTML وCSS
حيث يتم تطبيق تأثيرات مرئية جميلة وتفاعلية عند التمرير فوق الأزرار أو النقر عليها. سأشرح الكود بالتفصيل وأوضح أهميته وفائدته:
الهيكل العام للكود:
HTML: يحتوي على عنصر <div>
يمثل حاوية مركزية تحتوي على زرين (<button>
).
CSS: يحتوي على أنماط لتنسيق الصفحة والأزرار، بما في ذلك التدرجات اللونية، الظلال، والتحولات (transitions).
شرح الكود بالتفصيل:
أجزاء HTML:
<div class="center">
<button id="b1"><span>Button</span></button>
<button id="b2"><span>Button</span></button>
</div>
-
<div class="center">
: حاوية تحتوي على الزرين. تم تصميمها لتوسيط المحتوى في منتصف الصفحة. -
<button>
: يمثل زرًا. يحتوي على عنصر<span>
داخلي لعرض النص. -
id="b1"
وid="b2"
: معرفات فريدة تستخدم لتطبيق أنماط مختلفة على كل زر.
أجزاء CSS:
تنسيق body
:
body {
background: rgb(0 10 16);
height: 0;
width: 0;
}
-
background: rgb(0 10 16)
: يعين لون خلفية الصفحة إلى لون أزرق غامق. -
height: 0; width: 0;
: هذه القيم غير صحيحة هنا، لأنها تجعل عرض وارتفاع الصفحة صفرًا. يجب إزالتها أو تعديلها.
تنسيق .center
:
.center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
-
top: 50%; left: 50%; transform: translate(-50%, -50%);
: تستخدم لتوسيط الحاوية في منتصف الصفحة. -
display: flex; justify-content: center; align-items: center;
: يجعل العناصر داخل الحاوية (الأزرار) متمركزة أفقيًا وعموديًا.
تنسيق button
:
button {
align-items: center;
margin: 30px;
border: 0;
border-radius: 8px;
box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
box-sizing: border-box;
color: #FFFFFF;
display: flex;
font-family: Phantomsans, sans-serif;
font-size: 18px;
justify-content: center;
line-height: 1em;
max-width: 100%;
min-width: 140px;
padding: 3px;
text-decoration: none;
user-select: none;
touch-action: manipulation;
white-space: nowrap;
cursor: pointer;
transition: all .3s;
}
-
border: 0; border-radius: 8px;
: يزيل الحدود ويجعل زوايا الزر مدورة. -
box-shadow
: يضيف ظلًا حول الزر لإعطائه تأثيرًا ثلاثي الأبعاد. -
color: #FFFFFF;
: يعين لون النص داخل الزر إلى الأبيض. -
font-family
وfont-size
: يحددان الخط وحجم النص. -
transition: all .3s;
: يضيف تأثير انتقال سلس عند التمرير أو النقر.
تنسيق #b1
و #b2
:
#b1 {
background-image: linear-gradient(90deg, rgba(32,224,255,1) 0%, rgba(128,100,255,1) 50%, rgba(255,55,140,1) 100%);
}
#b2 {
background-image: linear-gradient(90deg, rgba(22,232,63,1) 0%, rgba(31,208,203,1) 48%, rgba(255,0,250,1) 100%);
}
-
background-image
: يعين تدرجات لونية مختلفة لكل زر:
#b1
: تدرج من الأزرق إلى البنفسجي إلى الوردي.#b2
: تدرج من الأخضر إلى الفيروزي إلى الوردي.
تنسيق button span
:
button span {
background-color: rgb(5, 6, 45);
padding: 16px 24px;
border-radius: 6px;
width: 100%;
height: 100%;
transition: 300ms;
}
background-color
: يعين لون خلفية النص داخل الزر.padding
: يضيف مساحة داخلية حول النص.border-radius
: يجعل زوايا الخلفية مدورة.transition
: يضيف تأثير انتقال سلس عند التمرير.
تأثيرات التمرير (hover
) والنقر (active
):
button:hover span {
background: none;
}
button:active {
transform: scale(0.9);
}
-
button:hover span
: عند التمرير فوق الزر، تختفي خلفية النص (background: none
). -
button:active
: عند النقر على الزر، يتم تصغيره بنسبة 90% (transform: scale(0.9)
).
أهمية وفائدة الكود:
- تصميم جذاب: يستخدم التدرجات اللونية والظلال لإعطاء الأزرار مظهرًا عصريًا.
- تفاعلية: يوفر تجربة مستخدم ممتعة من خلال تأثيرات التمرير والنقر.
- توسيط العناصر: يعرض الأزرار في منتصف الصفحة، مما يجعله مثاليًا لصفحات الهبوط (Landing Pages) أو الواجهات البسيطة.
- سهولة التخصيص: يمكن تعديل الألوان، الأحجام، والتأثيرات بسهولة لتناسب أي تصميم.
كيفية استخدامه:
- يمكن إضافة هذا الكود إلى صفحة ويب لعرض زرين جذابين.
- يمكن تعديل التدرجات اللونية، النصوص، والأحجام لتناسب احتياجات المشروع.
- يمكن إضافة وظائف JavaScript لجعل الأزرار تفعل شيئًا عند النقر عليها (مثل الانتقال إلى صفحة أخرى أو فتح نافذة منبثقة).
مثال عملي:
إذا أردت استخدام هذا الكود في صفحة ويب، يمكنك ببساطة نسخ ولصق الكود في ملف index.html
وملف style.css
، ثم فتح الصفحة في المتصفح لرؤية النتيجة.
تحسينات مقترحة:
- إصلاح
height
وwidth
فيbody
لتصحيح حجم الصفحة. - إضافة وظائف JavaScript للأزرار لجعلها تفعل شيئًا عند النقر.
- جعل التصميم متجاوبًا (Responsive) باستخدام استعلامات الوسائط (Media Queries).
الكود كاملا
<style>
body{
background: rgb(0 10 16);
height: 0;
width: 0;
}
.center{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
button {
align-items: center;
margin: 30px;
border: 0;
border-radius: 8px;
box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
box-sizing: border-box;
color: #FFFFFF;
display: flex;
font-family: Phantomsans, sans-serif;
font-size: 18px;
justify-content: center;
line-height: 1em;
max-width: 100%;
min-width: 140px;
padding: 3px;
text-decoration: none;
user-select: none;
touch-action: manipulation;
white-space: nowrap;
cursor: pointer;
transition: all .3s;
}
#b1{
background-image: linear-gradient(90deg, rgba(32,224,255,1) 0%, rgba(128,100,255,1) 50%, rgba(255,55,140,1) 100%);
}
#b2{
background-image: linear-gradient(90deg, rgba(22,232,63,1) 0%, rgba(31,208,203,1) 48%, rgba(255,0,250,1) 100%);
}
button:active,
button:hover {
outline: 0;
}
button span {
background-color: rgb(5, 6, 45);
padding: 16px 24px;
border-radius: 6px;
width: 100%;
height: 100%;
transition: 300ms;
}
button:hover span {
background: none;
}
button:active {
transform: scale(0.9);
}
</style>
<div class="center">
<button id="b1"><span>Button</span></button>
<button id="b2"><span>Button</span></button>
</div>
هذا الكود هو مثال رائع لتصميم أزرار تفاعلية وجذابة باستخدام HTML وCSS فقط، دون الحاجة إلى مكتبات خارجية.