پیشنمایش زنده (iframe sandbox)
تمامصفحه
<button class="radikalwp-btn-layer">دانلود رایگان<//button>
.radikalwp-btn-layer {
position: relative;
padding: 13px 32px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: #0f172a;
background: #fde047;
border: none;
border-radius: 12px;
cursor: pointer;
transition: transform .25s ease;
}
.radikalwp-btn-layer::after {
content: '';
position: absolute;
inset: 0;
background: #a855f7;
border-radius: 12px;
z-index: -1;
transform: translate(0, 0);
transition: transform .25s ease;
}
.radikalwp-btn-layer:hover { transform: translate(-3px, -3px); }
.radikalwp-btn-layer:hover::after { transform: translate(3px, 3px); }
درباره این اسنیپت
یک لایه رنگی پشت دکمه در حالت هاور از پشت سرش بیرون میآید؛ عمق دو بعدی جذابی میسازد. برای گالریها و سایتهای خلاقانه که کمی شادابی میخواهند مناسب است.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۱ از ۹ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!