مرجع بلاگ اسکای

معرفی کد ها و امکانات جدید برای وبلاگ نویسان بلاگ اسکای - قالب های حرفه ای بلاگ اسکای

مرجع بلاگ اسکای

معرفی کد ها و امکانات جدید برای وبلاگ نویسان بلاگ اسکای - قالب های حرفه ای بلاگ اسکای

کد دکمه فول css

در این پست برای شما کد دکمه های زیبایی را گذاشتم که در موارد مختلفی میتوانید از آنها استفاده کنید. این دکمه ها کاملا از css ساخته شده اند.

ابتدا کد زیر را در head خود قرار دهید :

.container > .button { margin: 0 10px; }

.button {
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  min-width: 96px;
  line-height: 46px;
  padding: 0 24px;
  font-size: 14px;
  color: white;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px #154c86;
  background-color: #247edd;
  background-clip: padding-box;
  border: 1px solid;
  border-color: #1c65b2 #18589c #18589c;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
}

.button:before {
  content: '';
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -20%;
  right: -20%;
  border-radius: 50%;
  background: transparent;
  -webkit-box-shadow: inset 0 0 38px rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 38px rgba(255, 255, 255, 0.5);
}

.button:hover { background-color: #1a74d3; }

.button:active {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 -1px #154c86;
  background: #1f71c8;
  border-color: #113f70 #154c86 #1c65b2;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
  background-image: -webkit-linear-gradient(top, #1a5da5, #3a8be0);
  background-image: -moz-linear-gradient(top, #1a5da5, #3a8be0);
  background-image: -o-linear-gradient(top, #1a5da5, #3a8be0);
  background-image: linear-gradient(to bottom, #1a5da5, #3a8be0);
}

.button:active:before {
  top: -50%;
  bottom: -125%;
  left: -15%;
  right: -15%;
  -webkit-box-shadow: inset 0 0 96px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 96px rgba(0, 0, 0, 0.2);
}

.button-green {
  text-shadow: 0 1px #0d4d09;
  background-color: #1ca913;
  border-color: #147b0e #11640b #11640b;
}

.button-green:hover { background-color: #159b0d; }

.button-green:active {
  text-shadow: 0 -1px #0d4d09;
  background: #189210;
  border-color: #093606 #0d4d09 #147b0e;
  background-image: -webkit-linear-gradient(top, #126d0c, #20c016);
  background-image: -moz-linear-gradient(top, #126d0c, #20c016);
  background-image: -o-linear-gradient(top, #126d0c, #20c016);
  background-image: linear-gradient(to bottom, #126d0c, #20c016);
}

.button-red {
  text-shadow: 0 1px #72100d;
  background-color: #cd1d18;
  border-color: #9f1713 #891310 #891310;
}

.button-red:hover { background-color: #c01511; }

.button-red:active {
  text-shadow: 0 -1px #72100d;
  background: #b61a15;
  border-color: #5b0d0b #72100d #9f1713;
  background-image: -webkit-linear-gradient(top, #921511, #e4201b);
  background-image: -moz-linear-gradient(top, #921511, #e4201b);
  background-image: -o-linear-gradient(top, #921511, #e4201b);
  background-image: linear-gradient(to bottom, #921511, #e4201b);
}
</style>

سپس کد رنگ دلخواه را از ادامه بردارید و در جایی که میخواهید کد نمایش داده شود قرار دهید.

ادامه مطلب ...

کد دکمه فول css کد دکمه زیبا برای وبلاگ دکمه css سی اس اس

محمد حسین پنج‌شنبه 17 مرداد 1392 ساعت 17:36

0 نظر

تبدیل طرح های فتوشاپ به CSS با یک کلیک - برای حرفه ای تر ها

امروزه کمتر کسی است که نام فتوشاپ را نشنیده باشد. فتوشاپ نه تنها یک ابزار محبوب برای ویرایش تصاویر است، بلکه بسیاری افراد از این نرم افزار برای طراحی ظاهر وب سایت ها استفاده می کنند. تنوع امکانات و افکت ها یکی از بزرگترین مزایای این نرم افزار شرکت ادوبی است.

شما به عنوان طراح وب سایت، پس از آماده شدن طرح نهایی چگونه آن را به HTML و CSS تبدیل می کنید؟ در ادامه مطلب قصد داریم ابزار مفید و البته رایگانی را معرفی کنیم که با یک کلیک دستورات سی اس اس را محاسبه و تولید می کند.

ادامه مطلب ...

فتوشاپ CSS طرح وب سایت تبدیل سی اس اس CSS3Ps پلاگین

محمد حسین دوشنبه 27 خرداد 1392 ساعت 22:47

1 نظر

مرجع بلاگ اسکای

مرجع بلاگ اسکای

محمد حسین مشمول

نظرسنجی

کد دکمه فول css

تبدیل طرح های فتوشاپ به CSS با یک کلیک - برای حرفه ای تر ها

مرجع بلاگ اسکای

محمد حسین مشمول

نظرسنجی

پیوندها

دسته‌ها

ابر برجسب

برگه‌ها

جدیدترین یادداشت‌ها

نویسندگان

بایگانی

جستجو

کد دکمه فول css

تبدیل طرح های فتوشاپ به CSS با یک کلیک - برای حرفه ای تر ها