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