<button class="radikalwp-btn-star"><svg class="radikalwp-btn-star-ic" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/><//svg><span>ویژه کن<//span><//button>
.radikalwp-btn-star {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 12px 28px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: #1f2937;
background: #fde68a;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background .3s ease;
}
.radikalwp-btn-star:hover { background: #fbbf24; }
.radikalwp-btn-star-ic { width: 18px; height: 18px; transition: transform .45s ease; }
.radikalwp-btn-star:hover .radikalwp-btn-star-ic { transform: rotate(360deg) scale(1.15); }
درباره این اسنیپت
دکمه با آیکون ستاره که هنگام هاور کامل میچرخد و رنگ دکمه تیرهتر میشود؛ برای امتیاز و ویژهسازی. این دکمه برای فراخوانهای اقدام (CTA)، فرمها و ناوبری طراحی شده است. پشتیبانی کامل راستچین (RTL) دارد و در حالت تیره سایت نیز ظاهر مناسبی خواهد داشت. کد کاملاً با CSS خالص نوشته شده و به هیچ کتابخانه خارجی وابسته نیست؛ کافی است آن را کپی و در پروژه خود بچسبانید.
پرسشهای متداول
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۷ از ۷ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!