پیشنمایش زنده (iframe sandbox)
تمامصفحه
<a class="radikalwp-hov-iconspin" href="#"><span class="radikalwp-hov-iconspin-icon">⬇<//span><span class="radikalwp-hov-iconspin-text">دانلود راهنمای نصب<//span><//a>
.radikalwp-hov-iconspin {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 18px 10px 10px;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 999px;
text-decoration: none;
transition: border-color .3s ease, box-shadow .3s ease;
}
.radikalwp-hov-iconspin:hover {
border-color: #c7d2fe;
box-shadow: 0 6px 18px rgba(99, 102, 241, .15);
}
.radikalwp-hov-iconspin-icon {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #4f46e5;
background: #eef2ff;
border-radius: 50%;
transition: transform .55s cubic-bezier(.35, 0, .25, 1), background .3s ease;
}
.radikalwp-hov-iconspin:hover .radikalwp-hov-iconspin-icon {
transform: rotate(360deg);
background: #e0e7ff;
}
.radikalwp-hov-iconspin-text { font-size: 13px; font-weight: 700; color: #334155; }
درباره این اسنیپت
دکمه لینکی که آیکون دایرهای کنار متنش در هاور، ۳۶۰ درجه میچرخد و رنگ پسزمینه دایره تغییر میکند؛ جزئیات کوچکی که حس ابزار دقیق میدهد. برای لینکهای دانلود، اشتراکگذاری و «بیشتر بدانید» مناسب است. چرخش با ترنزیشن نرم و منحنی پیشفرض است و روی متن اثری ندارد. مناسب ردیفهای لیست و سایدبارها.
پرسشهای متداول
کد فعلی 360 درجه است که به همان حالت برمیگردد؛ 180 درجه حس معکوس میدهد و برای فلشهای جهتی معنادارتر است.
خیر؛ SVG با stroke currentColor رنگ متن را میگیرد و در چرخش ثابت میماند؛ اندازه را حدود 16px تنظیم کنید.
بله؛ چرخش حول محور z مستقل از جهت متن است و در هر دو زبان یکسان دیده میشود.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۷ از ۷ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!