<button class="radikalwp-btn-clock"><svg class="radikalwp-btn-clock-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/><//svg><span>رزرو نوبت<//span><//button>
.radikalwp-btn-clock {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: #fff;
background: #7c3aed;
border: none;
border-radius: 12px;
cursor: pointer;
transition: background .3s ease, transform .25s ease;
}
.radikalwp-btn-clock:hover { background: #8b5cf6; transform: translateY(-2px); }
.radikalwp-btn-clock-ic { width: 18px; height: 18px; }
درباره این اسنیپت
دکمه ثبتی با آیکون ساعت که هنگام هاور نگاهی به زمان میاندازد؛ مناسب رزرو و نوبتدهی آنلاین. این دکمه برای فراخوانهای اقدام (CTA)، فرمها و ناوبری طراحی شده است. همه کلاسها با پیشوند radikalwp شروع میشوند تا با استایلهای قالب شما تداخلی پیش نیاید و راحتتر شخصیسازی شوند. انیمیشنها با GPU-friendly خواص transform و opacity ساخته شدهاند تا سرعت سایت شما تحت تأثیر قرار نگیرد.
پرسشهای متداول
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۵ از ۴ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!