درخواست آموزش ساخت یه نوع دکمه با css

[Altir]

به نام خدا با سلام خدمت حرفه ای های CSS اگه به سایت wp-persian.com رفته باشید می بینید که بالای سمت چپ سایت یه دکمه Search نوشته که وقتی روی اون می رید رنگ دورش و رنگ نوشتش سفید می شه. می خواستم از دوستان خواهش کنم که آموزش ساخت این دکمه رو به من یاد بدن و لطف کنن آموزش دقیقا همین دکمه باشه چون اطلاعات من در ضمینه Css خیلی کم هست و باید از اول دوستان زحمت بکشن و به صورت کامل یاد بدن. لطف کنید که این دکمه به صورتی باشه که وقتی روش کلیک می شه بره به یه آدرس مثلا www.example.com و کد دکمه فرمش رو هم بزارید ممنون می شم. اگر دوستان لطف کنن و این آموزش رو بزارن ، لطف خیلی بزرگی در حق من کردن.

 

[Webber]

سلام
اول سورس صفحه رو باز می کنیم و دنبال کد html دکمه می گردیم.

<!-- top search -->
<form method="get" id="head-search" action="http://wp-persian.com/">
<div><input type="text" maxlength="150" size="20" value="" name="s" class="search" />
<input type="submit" class="button" value="Search" />
</div>
</form>
<!-- #end top search -->

می ریم به آدرس زیر:
http://wp-persian.com/wp-content/themes/wp-persian-25/style.css
در فایل css مربوط به سایت دنبال کلاسی بنام button می گردیم.که:

#head-search .button {
/* 	float: right; */		
    border-color: #888;
	background: #666;
	color: #bbb;
	text-shadow: none !important;
}
#head-search input.button:hover {
	color: #fff;
	border-color: #aaa;
}

خوب حالا کمی کد رو تغییر می دیم و روی صفحه ی خودمون اعمال می کنیم.مثلا head-search رو پاک می کنیم.
امیدوارم به اندازه ی کافی کامل باشد
موفق باشید