چطوری button های این شکلی درست کنم ؟

[sharktech]

من یه چندتا button توی فتوشاپ طراحی کردم که هم قسمتی که موس روش قرار میگیره و هم حالت عادیش در یک عکس قرار دارن, اما نمیدونم چطوری این مدل button رو توی دریم ویور بسازم.

ممون میشم کسی کمک کنه.

مرسی

 

[Mr.Steres]

شما با استایل ( css ) می تونی این کار رو انجام بدی :

توی تگ head :

<style type="text/css" >

#inp {
	border:1px silver solid;
	font:100 11px tahoma;
	color:black;
	background-color:white;
}
#inp :hover {
	border:1px black solid;
	font:100 11px tahoma;
	color:white;
	background-color:silver;	
}

</style>

و در بادی :

<input type="submit" name="submit" value="submit" id="inp" />

 

[sharktech]

اینی که شما گفتین, فقط رنگ نوشته رو هنگامی که موس روش قرار میگیره عوض میکنه. اما من می خوام که عکس رو نشون بده.

 

[ali_nioton]

تو خود دریم داره

یه منو تو نوار ابزارش داره که کلید های رول اوور میسازه

یه مدلش 3 تا تصویر میگیره یه مدلش 4 تا تصویر سعی کن از 3 تاییه استفاده کنی

البته گمونم فقط تو خونه های جداول کار می کنه راحته ور بری را میفتی

 

[sharktech]

آره دیدمش, اما تا جایی که من میدونم, عکس های دکمه هات باید جدا باشه اما اون عکسی که من طراحی کردم فقط یک عدد عکسه که هر دو حالت دکمه توش قرار داره.

 

[Mr.Steres]

توی کدی که من گذاشتم می تونی با background-image: url() از عکس هم استفاده کنی !

 

[sharktech]

آقا ما یکی ساختیم گفتیم اینجا قرار بدیم :

این کد css

    .request {
    z-index: 1;
    }
    .request a {
      display: block;
      background: transparent url(img/btn.png) no-repeat 0 0;
      color: #fff;
      height: 28px;
      line-height: 24px;
      font-size: 13px;
      width: 156px;
      text-align: center;
      cursor: pointer;
    }
    .request a:hover {
      background: transparent url(img/.png) no-repeat 0 -28px;
    }

اینم کد html :

<div class="request">
                  <p><a href="index.php" target="_parent">صفحه اصلی</a></p>
</div>