<button class="radikalwp-btn-dot">گفتگوی آنلاین <span class="radikalwp-btn-dot-i"><//span><//button>
.radikalwp-btn-dot {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
color: #065f46;
background: #ecfdf5;
border: 1.5px solid #10b981;
border-radius: 999px;
cursor: pointer;
transition: background .25s ease;
}
.radikalwp-btn-dot-i {
width: 9px;
height: 9px;
background: #10b981;
border-radius: 50%;
animation: radikalwp-dot-blink 1.6s ease infinite;
}
@keyframes radikalwp-dot-blink {
0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); }
50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
درباره این اسنیپت
یک نقطه سبز چشمکزن کنار متن دکمه، وضعیت «آنلاین» یا «آماده» را نشان میدهد. برای دکمه شروع چت، تماس پشتیبانی و وضعیت سرویس عالی است. این دکمه برای فراخوانهای اقدام (CTA)، فرمها و ناوبری طراحی شده است. ساختار HTML حداقلی دارد و افزودن یا حذف تکرار المانها بدون بههمریختگی انجام میشود. رنگها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آنها را با پالت برند خودتان هماهنگ کنید.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۸ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!