شرح طريقة عمل خلفية زر عند مرور الماوس تتغير css

[SH3A3-Q]

السلام عليكم

اولا الشرح منقول من منتديات سيف العشق ... ولا ااعرف الطريقة بالضبط لاكن حبيت انقله لكم للفائده للجميع


اولا :: عمل خلفية للأزرار خلفية الزر الاول نسميه 1 بصيغة jpg والخلفية الثانية عند مرور الماوس عليها تتغير نسميها 2 بصيغة jpg والحجم يفضل يكون خفيف حتى يكتمل التحميل بسرعه للأزرار ....




طبعا بعد مانخلص من تصميمها ... نظعها داخل مجلد الاندكس او الصفحة الهوتمل اللي بنعمل فيه الازرار ...

اللحين نفتح الفرنت بيج ويفضل برنامج Microsoft Office SharePoint Designer 2007 او Microsoft Expression Web


اولا بعد مانفتح الفرنت بيج نضيف بعد



هذا الكود




}
.lists2 LI {
DISPLAY: inline;
}
.lists2 LI A {
background: url("1.jpg") repeat-x center ;
WIDTH: 80%;
PADDING-left: 8px;
PADDING-right: 8px;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px;
BORDER-RIGHT: #ffffff 0px solid;
DISPLAY: block;
COLOR: #ffffff;
TEXT-DECORATION: none;
text-align: center;
font-weight: bold;
FONT-SIZE: 17px;
}
.lists2 LI A:hover {
background: url("2.jpg") repeat-x center ;
COLOR: #000000;
}

.lists2 {
OVERFLOW: hidden;
PADDING: 0px;
MARGIN: 0px;
}



واللحين تم وضع كود css

اللحين نضيف الزر او جدول الزر نضيف بعد الكود اللي قبل يعني بعد

• 
  
  منتدى سيف العشق
  

طبعا مع تغير المطلوب مثل منتديات سيف العشق تغير اسمه والرابط بعد ...

لعمل اكثر من زر فقط كرر الكود

• 
  
  منتدى سيف العشق
  

مع التغيرات اللي تبيها وبس هذا هو عمل الزر بكل سهولة

وفي المرفق الصور وملف جاهز بالتعديلات

وانشاء الله الشرح سهل وواصل للجميع وهو شرح مختصر ....

ورابط الموضوع الاصلي
http://www.saef3.com/vb/thread22798.html

كل الود

الملفات المرفقة

عمل زر css.zip (6.3 كيلوبايت)







(( منقول بتقنية RSS )) اي ملاحظة يرجى تبليغ الادارة