السلام عليكم ورحمة الله تعالى وبركاته, أما بعد:

يسرني أن أضع بين أيديكم اليوم مثال عن الأزرار Buttons والحقول التي تعتمدها شركة جوجل, تم تصميم الأزرار Buttons لتكون بسيطة جدا ومتوافقة مع جميع المتصفحات, وصراحة أنا من المعجبين ببساطتها ورونقها.

المهم بدون ما أطول عليكم اترككم مع مثال للأزرار Buttons:


أظن أنكم أعجبتم بالأزرار Buttons بطبيعة الحال. والأتي طريقة تركيبها:
أولا تحتاج لإضافة الكلاسات التالية في ملف Css الخاص بك:
الكود الخاص بتكويد الزر:

.prg4all-button {
  display: inline-block;
  font-weight: bold;
  height: 29px;
  line-height: 29px;
  min-width: 54px;
  padding: 0 8px;
  text-align: center;
  outline: none;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #dcdcdc;
  color: #444;
  font-size: 11px;
  background: #f5f5f5;
  background: -webkit-linear-gradient(#f5f5f5, #f1f1f1);
  background: -moz-linear-gradient(#f5f5f5, #f1f1f1);
  background: -o-linear-gradient(#f5f5f5, #f1f1f1);
  background: linear-gradient(#f5f5f5, #f1f1f1);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5f5f5,endColorstr=#f1f1f1,GradientType=1);
}

الكود الذي يعرض التأثير عند وضع الفأرة على الزر:

.prg4all-button:hover {
  border-color: #c6c6c6;
  color: #222;
  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.15);
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
  background: #f8f8f8;
  background: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
  background: linear-gradient(top,#f8f8f8,#f1f1f1);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8,endColorstr=#f1f1f1,GradientType=1);
}

وأخيرا الكود الخاص بعرض التأثير بعد الضغظ على الزر:

.prg4all-button:active {
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

وبطبيعة الحال يمكنكم تغيير الألوان الخاصة بالأزرار كما تريدون.
ان واجهتكم أي مشكلة أو كان لديكم أي استفسار فلا تترددوا في طرحه. بهذا اكون قد انتهيت من هذا التطبيق, لتلتقي بمشيئة الله في تطبيق أخر, وأتمنى في الأخير أن يكون التطبيق قد نال إعجايكم ورضاكم.