<button class="radikalwp-btn-arrow"><span>بیشتر بدانید<//span><span class="radikalwp-btn-arrow-ic">←<//span><//button>
.radikalwp-btn-arrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 26px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
color: #fff;
background: #111827;
border: none;
border-radius: 999px;
cursor: pointer;
transition: background .3s ease;
}
.radikalwp-btn-arrow:hover { background: #312e81; }
.radikalwp-btn-arrow-ic {
display: inline-block;
transition: transform .3s ease;
}
.radikalwp-btn-arrow:hover .radikalwp-btn-arrow-ic { transform: translateX(-6px); }
درباره این اسنیپت
دکمه با فلشی که هنگام هاور به سمت جلو حرکت میکند و برمیگردد؛ راهنمای بصری خوب برای لینک «بیشتر بدانید». این دکمه برای فراخوانهای اقدام (CTA)، فرمها و ناوبری طراحی شده است. همه کلاسها با پیشوند radikalwp شروع میشوند تا با استایلهای قالب شما تداخلی پیش نیاید و راحتتر شخصیسازی شوند. انیمیشنها با GPU-friendly خواص transform و opacity ساخته شدهاند تا سرعت سایت شما تحت تأثیر قرار نگیرد.
پرسشهای متداول
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۱ از ۹ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
دکمه آیکون سرخورنده
دکمهای که متن آن در هاور کمی به سمت چپ میرود و یک فلش از سمت راست داخل دکمه سر میخورد.…
دکمه حالت دانلود با نوار پیشرفت
دکمه دانلود که هنگام هاور نوار پیشرفت طلایی از پایین بالا میآید؛ حس «در حال آمادهسازی» م…
دکمه پرش متن با فلش
روی هاور، متن کمی بالا میرود و فلش از کنار وارد میشود؛ حرکتی نرم و هدفمند. برای لینک «مش…
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!