<button class="radikalwp-btn-coin">قرعه‌کشی<//button>.radikalwp-btn-coin {
padding: 12px 34px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #f59e0b, #d97706);
border: none;
border-radius: 12px;
cursor: pointer;
transition: transform .55s ease, background .55s ease;
}
.radikalwp-btn-coin:hover {
transform: rotateY(360deg);
background: linear-gradient(135deg, #8b5cf6, #6366f1);
}درباره این اسنیپت
در هاور مثل سکه ۳۶۰ درجه می‌چرخد و در حین چرخش رنگ عوض می‌کند؛ افکتی سرگرم‌کننده برای محصولات سرگرمی. چرخش کوتاه است تا کاربر گیج نشود. این دکمه برای فراخوان‌های اقدام (CTA)، فرم‌ها و ناوبری طراحی شده است. این المان در ویجت HTML المنتور، فایل قالب استاتیک یا هر پروژه PHP و HTML دیگری بدون تغییر کار می‌کند. برای تغییر حس بصری کافی است متغیرهای رنگ بالای کد را عوض کنید؛ بقیه چیدمان دست‌نخورده می‌ماند.
پرسش‌های متداول
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشن‌ها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۳ از ۴ رأی — برای امتیازدهی وارد شوید
دیدگاه‌ها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!