<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 ایزولهاند و با استایل قالب تداخل نمیکنند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۷ از ۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!