پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<button class="radikalwp-btn-press">افزودن به سبد<//button>
.radikalwp-btn-press {
  padding: 13px 34px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 0 #b45309, 0 12px 20px rgba(180, 83, 9, .3);
  transition: transform .12s ease, box-shadow .12s ease, filter .2s ease;
}
.radikalwp-btn-press:hover { filter: brightness(1.06); }
.radikalwp-btn-press:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 #b45309, 0 4px 10px rgba(180, 83, 9, .3);
}

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

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

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

مقدار 6px در box-shadow لبه پایین را تغییر دهید. مقدار transform: translateY در حالت :active را هم برابر همان عدد کنید تا دکمه کامل بنشیند.

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

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

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

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

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

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

کپچا

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

شاید بپسندی

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

دکمه سه‌بعدی مکانیکی

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

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

دکمه سه‌بعدی فشاری
۴۵
۴.۲ (۷)
پیش‌نمایش زنده اسنیپت

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

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