پیشنمایش زنده (iframe sandbox)
تمامصفحه
<button class="radikalwp-btn-iconswap">مشاهده بیشتر<span class="radikalwp-btn-iconswap-arrow">←<//span><//button>
.radikalwp-btn-iconswap {
display: inline-flex;
align-items: center;
gap: 0;
padding: 12px 28px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: #fff;
background: #0f172a;
border: none;
border-radius: 12px;
cursor: pointer;
overflow: hidden;
transition: background .3s ease;
}
.radikalwp-btn-iconswap:hover { background: #1e293b; }
.radikalwp-btn-iconswap-arrow {
display: inline-block;
width: 0;
opacity: 0;
transform: translateX(-14px);
transition: width .3s ease, opacity .3s ease, transform .3s ease;
overflow: hidden;
}
.radikalwp-btn-iconswap:hover .radikalwp-btn-iconswap-arrow {
width: 24px;
opacity: 1;
transform: translateX(0);
margin-right: 10px;
}
درباره این اسنیپت
دکمهای که متن آن در هاور کمی به سمت چپ میرود و یک فلش از سمت راست داخل دکمه سر میخورد. این جابهجایی روان حس تعاملی طبیعی میسازد و کاربر را به کلیک تشویق میکند. مناسب دکمههای «مشاهده بیشتر»، لینک مقالات و لینکهای CTA ثانویه است. افکت فقط با transform و transition ساخته شده و بسیار سبک است.
پرسشهای متداول
یک span با محتوای ← داخل دکمه است که در حالت عادی عرض و شفافیت صفر دارد و در هاور باز میشود. میتوانید بهجای متن فلش از SVG یا آیکون دلخواه استفاده کنید.
این نسخه برای RTL تنظیم شده است. برای LRO کافی است جهت transform و margin-right را برعکس کنید.
عرض نهایی بازشده را در ویژگی width حالت هاور تعیین کنید؛ مقدار بزرگتر، فضای بیشتری به آیکون میدهد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۸ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!