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