كيف تجعل جميع أزرار مدونتك جميلة جداً.. درس CSS

كيف تجعل جميع أزرار مدونتك جميلة جداً.. درس CSS button generate

السلام عليكم..
كيف حالكم إخواني المدونين أصحاب المواقع و المدونات, اسأل الله ان تكونون في افضل حال.

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

<a class="buttons" href="#">ميني سوفت</a>

اما عن تنسيق أزرار المدونة الخاصة بك تنسيقاً رائعاً حقيقياً إحترافياً فيكون باستخدام اللغة الرائعة CSS .
لتنسيق أزرار المدونة تابع التالي ..
إذهب إلى لوحة تحكم المدونة ثم إلى قالب
و فوق الوسم

]]></b:skin>

ضع الكود التالي..

/* button CSS By MiniSoft */
.button{
-moz-box-shadow:0 0 5px 1px #666;
-webkit-box-shadow:0 0 5px 1px #666;
box-shadow:0 0 5px 1px #666;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background-color:#fe1a00;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
text-indent:0px;
display:inline-block;
color:#FFFFFF !important;
font:normal normal Tahoma,Arial;
height:40px;
line-height:40px;
width:106px;
text-decoration:none;
text-align:center;
text-shadow:0px 2px 5px #333;
}
.button:hover{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
background-color:#ce0100;
}
.button:active{
position:relative;
top:1px;
}

تعالوا نقوم بالنظر في هذا الكود ولمن يريد التعديل عليه..
هذا الكود هو لون وحجم ظل الزر.
هذا الكود هو لون الخلفية للزر.
هذا الكود هو لون الخط في قلب الزر.
هذا الكود هو نوع وحجم الخط في قلب الزر.
هذا الكود هو عرض و ارتفاع الزر.
هذا الكود هو لون وحجم الظل خلف الكتابة التي على الزر.

هذا الكود هو لون الزر عند مرور الفأرة عليه.
بعد وضع الكود بالقالب إضغط حفظ القالب ومبارك عليك ازرار رائعة.
لمشاهدة الزر قبل الشروع في العمل إضغط هنـــا

ما تعلمناه اضافياً في هذا الدرس هو كيفية عمل خلفية ذات لونين بواسطة أكواد الخلفية Background في الكود السابق.