پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<button class="radikalwp-btn-press3d">ثبت‌نام رایگان<//button>
.radikalwp-btn-press3d {
  padding: 13px 36px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: #831843;
  background: #f9a8d4;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 5px 0 #db2777, 0 10px 20px rgba(219, 39, 119, .3);
  transition: transform .12s ease, box-shadow .12s ease;
}
.radikalwp-btn-press3d:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #db2777, 0 3px 8px rgba(219, 39, 119, .3);
}

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

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

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

مقدار 5px در box-shadow (لبه پایین) و همان مقدار در translateY حالت active را هم‌زمان تغییر دهید تا فشردن طبیعی بماند.

بهتر است نسخه تیره‌تر از رنگ بدنه باشد (مثل #db2777 برای بدنه صورتی روشن) تا حس سایه و عمق طبیعی شود.

بله؛ با طیف قرمز (بدنه #fca5a5 و لبه #dc2626) حس هشدار لمسی خوبی می‌سازد و کاربر را از اقدام مخرب مطمئن‌تر می‌کند.

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

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

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

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

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

کپچا

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

شاید بپسندی

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

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

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

دکمه حباب بالا آینده

دکمه حباب هاور
۸۰
۴.۵ (۱۲)
پیش‌نمایش زنده اسنیپت

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

دکمه چرخش دورو
۶۰
۴.۱ (۹)