ایجاد دکمه های متحرک با اشاره موس؟؟؟؟

[armin_mi216 12]

سلام

کسی میتونه راهنمایی کنه که چطور باید دکمه ای برای سایت درست کرد که وقتی موس میره روش حرکت کنه یا رنگش عوض بشه یا تغییر سایز بده؟

[reza.sh 19]

برای این کار از java script می تونید استفاده کنید و منابع زیادی تو نت هست باید سرچ کنید

ولی یک افزونه که دارای افکت خاص برای ماوس (ارشاره به یک لینک) : http://extensions.jtemplate.ru/index.php/jt-point

[Morteza Fard Saffari 35]

سلام

کسی میتونه راهنمایی کنه که چطور باید دکمه ای برای سایت درست کرد که وقتی موس میره روش حرکت کنه یا رنگش عوض بشه یا تغییر سایز بده؟

سلام دوست من

شما می تونید برای این کار از CSS3 هم کمک بگیری د خیلی راحت این کار رو انجام بدید که این روش ها توصیه میشه

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

[amin.poorsaeed 26]

به جای اینکه از jquery استفاده بشه بهتره از css استفاده بشه چون هم زیباتر هست و هم سریعتر

به این نمونه توجه کنید

برای این که یک دکمه یا لینک با این حالتی که شما می خواین بشه باید اول برای دکمه یا لینکتون کلاس تعریف کنید ( تو این نمونه برا لینک تعریف می کنیم )

<a class="button">کلیک کن</a>

حالا کافیه کد css زیر رو به فایل template.css قالبت اضافه کنی

.button{
padding:6px 20px;
font-family:tahoma;
font-size:12px;
font-weight:normal;
background:#f2f2f2;
border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border:1px solid #d1d1d1;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
color:#666;
}
.button:hover{
background:#FFF;
}

تو مثال بالا وقتی ماوس بیاد روش یا اصطلاح اصلی hover بشه رنگ دکمه عوض میشه

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

.button{
padding:6px 20px;
font-family:tahoma;
font-size:12px;
font-weight:normal;
background:#f2f2f2;
border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border:1px solid #d1d1d1;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
color:#666;
position:relative;
}
.button:hover{
-moz-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}

و اگر بخوای جا به جا بشه از این کد استفاده کن

.button{
padding:6px 20px;
font-family:tahoma;
font-size:12px;
font-weight:normal;
background:#f2f2f2;
border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border:1px solid #d1d1d1;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
color:#666;
position:absolute;
}
.button:hover{
-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(-20px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(-20px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(-20px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(-20px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(-20px) skewX(0deg) skewY(0deg);  
}

[Komail 12]

دلم نیومد به همین دکمه می پسندم بسنده کنم

دست مریضاد ای مدیر بازنشسته ای امین پور سعید عزیز

موفق باشی و پایدار