<button class="radikalwp-btn-dots"><span>در حال ارسال<//span><i><//i><i><//i><i><//i><//button>
.radikalwp-btn-dots {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
color: #fff;
background: #6366f1;
border: none;
border-radius: 10px;
cursor: pointer;
}
.radikalwp-btn-dots i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
animation: radikalwp-dots-bounce 1.2s ease-in-out infinite;
}
.radikalwp-btn-dots i:nth-child(3) { animation-delay: .15s; }
.radikalwp-btn-dots i:nth-child(4) { animation-delay: .3s; }
@keyframes radikalwp-dots-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: .6; }
30% { transform: translateY(-6px); opacity: 1; }
}
درباره این اسنیپت
دکمهای که حالت «در حال ارسال» را با سه نقطه متحرک نمایش میدهد؛ مناسب فرمها و پرداختها. این دکمه برای فراخوانهای اقدام (CTA)، فرمها و ناوبری طراحی شده است. همه کلاسها با پیشوند radikalwp شروع میشوند تا با استایلهای قالب شما تداخلی پیش نیاید و راحتتر شخصیسازی شوند. انیمیشنها با GPU-friendly خواص transform و opacity ساخته شدهاند تا سرعت سایت شما تحت تأثیر قرار نگیرد.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۹ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!