پیشنمایش زنده (iframe sandbox)
تمامصفحه
<button class="radikalwp-btn-textswap"><span class="radikalwp-btn-textswap-stack"><span>مشاهده دورهها<//span><span>همین حالا ثبتنام کن<//span><//span><//button>
.radikalwp-btn-textswap {
padding: 0;
font-family: inherit;
background: linear-gradient(135deg, #0ea5e9, #6366f1);
border: none;
border-radius: 12px;
cursor: pointer;
overflow: hidden;
}
.radikalwp-btn-textswap-stack {
display: block;
transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.radikalwp-btn-textswap-stack > span {
display: flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 34px;
font-size: 15px;
font-weight: 700;
color: #fff;
}
.radikalwp-btn-textswap:hover .radikalwp-btn-textswap-stack {
transform: translateY(-48px);
}
درباره این اسنیپت
دکمهای دوبل که در هاور، متن اصلی به بالا میلغزد و متن دوم (مثلاً دعوت به اقدام) از پایین جایش را میگیرد. هر دو متن در یک لایه مشترک قرار دارند و حرکت با translateY روان اجرا میشود. برای دکمههای خلاقانه لندینگها و دعوت به ثبتنام انتخابی چشمگیر است. ساختار ساده با دو span و overflow مخفی است.
پرسشهای متداول
مقدار height دو span و مقدار translateY در هاور باید برابر باشند؛ هر دو را با هم تغییر دهید (مثلاً 56px) تا لغزش دقیق بماند.
بله؛ به span دوم یک کلاس بدهید و رنگ دلخواه بگذارید. هر دو متن در همان نوار افقی مشترک نمایش داده میشوند.
خیر؛ حرکت فقط عمودی است و در زبانهای راستبهچپ و چپبهراست یکسان کار میکند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۱ از ۱۰ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!