پیش‌نمایش زنده (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 دوم یک کلاس بدهید و رنگ دلخواه بگذارید. هر دو متن در همان نوار افقی مشترک نمایش داده می‌شوند.

خیر؛ حرکت فقط عمودی است و در زبان‌های راست‌به‌چپ و چپ‌به‌راست یکسان کار می‌کند.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۱ از ۱۰ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

پیش‌نمایش زنده اسنیپت

دکمه گرادیان سیال

دکمه گرادیان سیال
۶۰
۴.۵ (۹)
پیش‌نمایش زنده اسنیپت

دکمه چرخش متن دوگانه

دکمه متن هاور
۵۲
۴.۲ (۸)
پیش‌نمایش زنده اسنیپت

دکمه شفق قطبی متحرک

دکمه گرادیان متحرک
۴۷
۴.۲ (۷)