<button class="radikalwp-nv-top">↑<//button>.radikalwp-nv-top {
width: 46px;
height: 46px;
border: none;
border-radius: 14px;
background: #0f172a;
color: #fff;
font-size: 18px;
cursor: pointer;
box-shadow: 0 10px 26px rgba(15, 23, 42, .3);
transition: all .28s ease;
}
.radikalwp-nv-top:hover {
background: #4f46e5;
transform: translateY(-4px);
box-shadow: 0 16px 32px rgba(79, 70, 229, .4);
}درباره این اسنیپت
دکمه دایره‌ای شناور با فلش بالا و هاله هاور؛ همیشه در گوشه صفحه در دسترس است. برای صفحات طولانی مثل وبلاگ و فهرست محصولات لازم است. این بلوک ناوبری ساختار مسیریابی صفحه را می‌سازد و در دسکتاپ و موبایل پاسخ‌گو است. پشتیبانی کامل راست‌چین (RTL) دارد و در حالت تیره سایت نیز ظاهر مناسبی خواهد داشت. کد کاملاً با CSS خالص نوشته شده و به هیچ کتابخانه خارجی وابسته نیست؛ کافی است آن را کپی و در پروژه خود بچسبانید.
پرسش‌های متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشن‌ها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۷ رأی — برای امتیازدهی وارد شوید
دیدگاه‌ها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!