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