اذهب إلى المحتوى
  • 0

اطلب كود css تغيير شكل الـــ (button)

كمال صالح2

السؤال

Recommended Posts

  • 1

الأمر بسيط، قم باستعمال محدد الوسم button وقم بتجاوز بعض التنسيقات الافتراضية: 

button{
  background-color: rgba(122,122,254,1);
  color: white;
  padding:5px 10px;
  border-radius: 2px;
  border: 2px rgba(122,124,254,1) solid;
  cursor: pointer;
}
button:hover{
  background-color: rgba(122,122,254,.5);
}

هيكلة HTML: 

<button> OK </button>

الناتج: 
image.png.2e54a741eb8d5c6d95e9508e7111dc67.png

توثيق العنصر button في HTML بحسب ويكي حسوب.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

إذا كنت تقصد تغيير شكل الـــ (button) على حسب ال state فيوجد

  • :hover
  • :focus
  • :active

ويمكن استخدامهم بالشكل التالي 

/* ستايل الزر الافتراضي */
button {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  background-color: #4CAF50; /* لون الخلفية */
  color: #fff; /* لون النص */
  border: none;
  cursor: pointer;
}

/* تحديد مظهر الزر عندما يكون عليه التركيز */
button:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* تحديد مظهر الزر عندما مرور مؤشر الفأرة عليه (hover) */
button:hover {
  background-color: #45a049; /* تغيير لون الخلفية عند التحويل */
}

/* تحديد مظهر الزر عند الضغط عليه */
button:active {
  background-color: #3e8e41; /* تغيير لون الخلفية عند الضغط */
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...