پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<button class="radikalwp-btn-mech">افزودن به سبد<//button>
.radikalwp-btn-mech {
  padding: 13px 34px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: #134e4a;
  background: #5eead4;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 5px 0 #0d9488, 0 9px 16px rgba(13, 148, 136, .35);
  transition: transform .12s ease, box-shadow .12s ease, filter .2s ease;
}
.radikalwp-btn-mech:hover { filter: brightness(1.05); }
.radikalwp-btn-mech:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 #0d9488, 0 3px 8px rgba(13, 148, 136, .3);
}

درباره این اسنیپت

دکمه‌ای با لبه پایین سخت که مثل کلید واقعی در کلیک فرو می‌رود و بازخورد لمسی قوی به کاربر می‌دهد. سایه تخت و رنگ فیروزه‌ای شاد، حس بازی‌گون و فیزیکی می‌سازد. برای فرم‌های سفارش، دکمه‌های افزودن به سبد و ابزارهای داخلی اپلیکیشن مناسب است. افکت فقط با box-shadow و transform ساخته شده و سبک مانده است.

پرسش‌های متداول

سه رنگ بدنه، لبه پایین و سایه در CSS مشخص شده‌اند. هر سه مقدار را هم‌زمان تغییر دهید تا حس عمق سه‌بعدی حفظ شود.

بله؛ کافی است کد را در ویجت HTML المنتور بگذارید. بدون افزونه اضافه اجرا می‌شود و با استایل قالب تداخل نمی‌کند.

بله؛ حالت :active روی لمس صفحه هم اجرا می‌شود و حس فرو رفتن کلید واقعی حفظ می‌شود.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید

Comments (۰)

No comments yet — be the first!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

پیش‌نمایش زنده اسنیپت

دکمه سه‌بعدی نرم صورتی

دکمه‌ای صورتی با لبه پایین ضخیم‌تر که در کلیک، کل دکمه به پایین فرو می‌رود و لبه جمع می‌شو…

دکمه سه‌بعدی لمسی
۴۱۲ ۱۰۰
۴.۲ (۱۶)
پیش‌نمایش زنده اسنیپت

دکمه دورو چرخان با پره

دو سطح کاملاً مجزا دارد که با هاور مثل کارت حول محور افقی می‌چرخند و پیام دوم را نشان می‌د…

دکمه چرخش دورو
۲۴۲ ۶۰
۴.۱ (۹)
پیش‌نمایش زنده اسنیپت

دکمه سه‌بعدی فشاری

دکمه با سایه سخت (hard shadow) که هنگام کلیک به‌صورت فیزیکی فرو می‌رود؛ حس سه‌بعدی واقعی.…

سه‌بعدی دکمه کلیک
۱۵۲ ۳۷
۴.۲ (۶)