تغییر رنگ یا تغییر شکل دکمه ها در سایت

[Farzad66]

با سلام

چه طور می تونم از طریق CSS دکمه های سایت را که رنگ آن به صورت پیشفرض میباشد تغییر بدم مثلا رنگش را عوض کنم یا به جای آن تصویری که میخوام قرار بدم

با تشکر از راهنمایی شما

[alireza_s_84]

با سلام
چه طور می تونم از طریق CSS دکمه های سایت را که رنگ آن به صورت پیشفرض میباشد تغییر بدم مثلا رنگش را عوض کنم یا به جای آن تصویری که میخوام قرار بدم
با تشکر از راهنمایی شما
سلام دوست عزیز:
برای عوض کردن رنگ پیش فرض دکمه ها و استایل آنها شما فقط به یک کلاس CSS داری بصورت زیر:

input[type="submit"] , input[type="button"] , input[type="reset"]
{
border: 1px solid #005500;
background-color: #00DD00;
width: 75px;
height: 20px;
}


حالا اگر میخوای موس رفت روش رنگش تغییر بکنه این کلاس رو هم اضافه میکنی:

input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover
{
border: 1px solid #0000CC;
background-color: #99CCFF;
}

حالا اگر میخوای یک Button داشته باشی که فقط عکس باشه یعنی یک عکس به عنوان دکمه عمل کنه سه راه داری:
الف) همین کلاسهایی که فرستادم رو میتونی اینجوری برای یک Button اصلاح کنی:

input[type="submit"], input[type="button"], input[type="reset"]
{
border-width: 0px;
background-color: Transparent;
background-repeat: no-repeat;
background-image: url('عکس حالت عادی');
}

input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover
{
background-image: url('عکس حالت موس اور');
}

ب) استفاده از تگ <input type="image" src="" /> که یک عکس رو به مانند دکمه نشون میده برای عوض کردن عکس هم میتونی از جاوا اسکریپت استفاده کنی:

<input onmouseover="this.src='عکس موس اور';" onmouseout="this.src='عکس حالت عادی';" type="image" src="" />


یک روش دیگه هم وجود داره که توضیح ندم بهتره و اما چه زمانی از کدوم استفاده کنیم:
اگر شما همه دکمه هاتون هم شکل هستن و فقط متن روی اونها تغییر میکنه از روش الف و گرنه بهتره از حالت ب استفاده کنید .
موفق باشید

[Farzad66]

بسیار ممنونم خیلی عالی بود

من تصمیم گرفتم تصویر بذارم جای دکمه ها حالا تصویر را قرار دادم اما تصویر به طور کامل فیکس نمیشه با دکمه ، که من تصویر دکمه را در همین جا پیوست کردم

یکی از تصاویر مربوط میشه به نحوه نمایش دکمه در سایت و دیگر مربوط میشه به خود دکمه

[Farzad66]

ممنون میشم راهنمایی کنید

[Farzad66]

همچنین اندازه دکمه ها در Firefox و IE متفاوته ، در اکسپلورر کوچکتره ، وقتی هم بهش خاصیت .With میدهم همه دکمه ها به یک اندازه میشه چه طور این مشکل را بر طرف کنم

[kamranafshar33]

با سلام
برای اینکه در فایر فاکس و ie وکلا مرورگرها تصاویر فیکس بشن اولین قانون اینه که هر کدام از سلکتور هارو در div جدا می نویسیم.
به جای height هم از padding برای متن موجود استفاده مینماییم.
وآخر اینکه بهتر برای اینکه کارمون سریع تر انجام بشه از تصاویر کمتر استفاده کنیم چون در بعضی از مرورگرهای قدیمی دوباره به اشکال بر میخوریم.

[Farzad66]

ممنون

خب چگونه من هر کدام از این دکمه ها را در دایو جدا بنویسم ، یعنی برای دکمه فرم ها یک دایو برای دکمه جستجو یک دایو دیگر

من از padding استفاده کردم اما سر جای مشخصشش قرار نمیگرد و بالاتر از فیلد نمایش داده میشه

[Farzad66]

دوستان عزیز در صورت امکان یه راهنمایی کوچک بکنید

[rezaramzi]

عیول الله - خیلی عالی بود - همه جوابا عالی بود - ممنون از همه - tnx for all