<button class="radikalwp-btn-neumorph">تنظیمات<//button>.radikalwp-btn-neumorph {
padding: 14px 34px;
font-size: 16px;
font-family: inherit;
color: #4f46e5;
background: #e8ecf3;
border: none;
border-radius: 14px;
cursor: pointer;
box-shadow: 6px 6px 12px #c9cfd9, -6px -6px 12px #ffffff;
transition: box-shadow .2s ease;
}
.radikalwp-btn-neumorph:active {
box-shadow: inset 4px 4px 8px #c9cfd9, inset -4px -4px 8px #ffffff;
}درباره این اسنیپت
دکمه نئومورفیک با دو سایه روشن و تیره؛ سبک مینیمال برای داشبوردها و اپلیکیشن‌های مدرن. این دکمه برای فراخوان‌های اقدام (CTA)، فرم‌ها و ناوبری طراحی شده است. پشتیبانی کامل راست‌چین (RTL) دارد و در حالت تیره سایت نیز ظاهر مناسبی خواهد داشت. کد کاملاً با CSS خالص نوشته شده و به هیچ کتابخانه خارجی وابسته نیست؛ کافی است آن را کپی و در پروژه خود بچسبانید.
پرسش‌های متداول
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشن‌ها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۷ از ۴ رأی — برای امتیازدهی وارد شوید
دیدگاه‌ها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!