طراحی بک دکمه ساده دور گرد

[mohammad-gh]

فرض کنید
سه تا عکس دارم
یکی گردی سمت راست, یکی تصویر وسط دکنمهو دیگری گردی سمت چپ
می خواهم دکمه با css طراحی کنم که طولش دست خودم باشه و گردیش رو حفظ کنه
سه تا عکسم رو هم گذاشتم
926009260192602
ممنون
این هم فایل عکسها

[sepehrazimi]

سلام فکر کنم منظورت اینه

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td ><img src="button-left1.gif" align="right" /></td>
<td width="100" background="button-tail1.gif" style="background-repeat:repeat-x "></td>
<td ><img src="button-right1.gif" align="left"/></td>
</tr>
</table>

برای تغییر اندازه دکمه فقط عدد 100 رو تغییر بده

[maryamm_20]

از روش tableless هم میشه استفاده کرد 3تا div روی هم float:right
دیو بک گراند relative اون 2 تا absolute ، top , left دیو ها رو تنظیم کنید.

[ya30ien2]

با css جالبتر و راحتر و سبکتر و بهینه تر نیست؟؟؟؟؟؟؟؟؟؟؟؟؟
شما اندازه باتون رو روی حداکثر بگیر
یعنی طول رو فکر میکنی در کل سایتت حداکثر روی 50 پیکسل بزاری خوبه بعد ازش در کل سایت استفاده کن
من که فکر میکنم خیلی هم شیکتر باشه تا باتون در اندازه های متفاوت داخل سایت باشه

[Vitallity]

این روش تمیزی هست:
.button {
background-image: url("img/button-left1.gif"), url("img/button-tail1.gif"), url("img/button-right1.gif");
background-repeat: no-repeat, repeat-x, no-repeat;
background-position: left, center, right;
width:100px;
height:27px;
}
کلاس div مورد نظرت رو، button قرار بده.

[mohammad-gh]

از روش tableless هم میشه استفاده کرد 3تا div روی هم float:right
دیو بک گراند relative اون 2 تا absolute ، top , left دیو ها رو تنظیم کنید.


میشه نمونه کد بزاری چون منظور من دقیقا همین بود


با css جالبتر و راحتر و سبکتر و بهینه تر نیست؟؟؟؟؟؟؟؟؟؟؟؟؟

ولی روشی که در ادامه گفتید اصلا به css مربوط نیست !!!

[Yuness Mehdian]

روشی رو که Vitallity (http://barnamenevis.org/member.php?219653-Vitallity) گفتند ساده تر هست یعنی یه div بذاریم با سه تا بک گراند وسطی در طول تکرار میشه و گردی ها هم سمت چپ و راست فقط یه مشکل هست برای hover اون نمیشه با css کاری کرد کمی javascript لازمه . ولی تو css3 خصوصیتی به اسم border-image اومده که کار رو راحت تر کرده یعنی یه عکس میذارید که رو border اعمال میشه و به طول و عرض هم وابسته نیست البته browser compatibility باید بررسی بشه . اگه حوصله داری اینجا (http://www.w3.org/TR/css3-background/) رو بخون اگه نداری اینجا (http://css-tricks.com/understanding-border-image/)

[ya30ien2]

من داخل این برنامه یک عکس رو برای باتون انتخاب کردم و دورش رو گرد کردم و سایه و یکم دستکاری که در هر اندازهای بزاریش گردی دورش تغییر نمیکنه ببین شاید بکارت بیاد

[mohammad-gh]

میشه به زبان HTML خالی بنویسید

[moshaver71]

فک کنم این لینک مشکلتون رو حل کنه:
http://www.htmldrive.net/items/show/1180/Pure-CSS3-Customizable-Pressure-Buttons

[mohammad-gh]

ممنون از شما ولی این بازهم داشت روی تگ <a> توضیح میداد منه روی دکمه submit یا button

[l4dl4d]

خوب دوست عزیز تو فتوشاپدکمه باشه دکمه گرد طراحیش کن بعد با png ذخیره کن که دورش هم گرد میمونه اگه ساز یاکیومنتت بزرگ تر از
چون استفاده از css همیشه و تو همه ی مرورگر ها جواب نمیده!:متعجب::متعجب:
_________________
شــــ ــــــــــــریم

[کامروا]

بنده با روش ya30ien2 (http://barnamenevis.org/member.php?210845-ya30ien2) موافقم.

به این شکل :

.submit {
width: 80px;
height: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: -moz-linear-gradient(top,#00AA00,#005500);
background: -webkit-gradient(linear,left top,left bottom,from(#00AA00),to(#005500));
}

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

موفق باشید