موتینِکس

مرجع کد و ابزار و گرافیک

موتینِکس

مرجع کد و ابزار و گرافیک

کد تکمه بسیار زیبا با css

يكشنبه, ۴ خرداد ۱۳۹۳، ۰۲:۵۸ ب.ظ

دموی این تکمه:

  موتینکس

کد زیر رو تو بخش head قالبتون بزارین

<style type="text/css">
.motinex_button {
	-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	box-shadow:inset 0px 1px 0px 0px #fce2c1;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
	background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
	background-color:#ffc477;
	-webkit-border-top-left-radius:32px;
	-moz-border-radius-topleft:32px;
	border-top-left-radius:32px;
	-webkit-border-top-right-radius:32px;
	-moz-border-radius-topright:32px;
	border-top-right-radius:32px;
	-webkit-border-bottom-right-radius:32px;
	-moz-border-radius-bottomright:32px;
	border-bottom-right-radius:32px;
	-webkit-border-bottom-left-radius:32px;
	-moz-border-radius-bottomleft:32px;
	border-bottom-left-radius:32px;
	text-indent:0px;
	border:1px solid #eeb44f;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:24px;
	font-weight:normal;
	font-style:normal;
	height:60px;
	line-height:60px;
	
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #cc9f52;
}
.motinex_button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
	background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
	background-color:#fb9e25;
}.motinex_button:active {
	position:relative;
	top:1px;
}</style>

و این کد هم بزارین جایی که می خواین تکمه نشون داده بشه:

<a class="motinex_button" target="_blank" href="http://motinex.blog.ir"> موتینکس </a>

XX: برای ویرایش نوشته و لینک تکمه، کد دوم رو ویرایش کنید

XX: دوستانی که می خوان استایل تکمه رو ویرایش کنن ولی بلد نیستن تو نظرات بگن خودم براشون ویرایش کنم

XX: استفاده از کد رایگانه اما لطفا قوانین کپی رایت رو زیر پا نزارین


googlereader googleplus stumbleupon digg cloob twitter facebook

نظرات (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
تجدید کد امنیتی