پیش‌نمایش زنده (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 حالت هاور تعیین کنید؛ مقدار بزرگ‌تر، فضای بیشتری به آیکون می‌دهد.

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

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

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

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

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

کپچا

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

شاید بپسندی

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

دکمه فلش متحرک

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

دکمه با آیکون کشویی

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

دکمه پرش متن با فلش

دکمه فلش هاور
۱۵
۴.۴ (۳)