پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<button class="radikalwp-btn-flip"><span class="radikalwp-btn-flip-f">ارسال پیام<//span><span class="radikalwp-btn-flip-b">در خدمتیم ✉<//span><//button>
.radikalwp-btn-flip {
  position: relative;
  padding: 0;
  width: 150px;
  height: 48px;
  font-family: inherit;
  border: none;
  background: transparent;
  cursor: pointer;
  perspective: 600px;
}
.radikalwp-btn-flip-f,
.radikalwp-btn-flip-b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 12px;
  backface-visibility: hidden;
  transition: transform .5s cubic-bezier(.4, .2, .2, 1);
}
.radikalwp-btn-flip-f { color: #fff; background: #4f46e5; }
.radikalwp-btn-flip-b { color: #4f46e5; background: #e0e7ff; transform: rotateX(180deg); }
.radikalwp-btn-flip:hover .radikalwp-btn-flip-f { transform: rotateX(180deg); }
.radikalwp-btn-flip:hover .radikalwp-btn-flip-b { transform: rotateX(0); }

درباره این اسنیپت

دو سطح کاملاً مجزا دارد که با هاور مثل کارت حول محور افقی می‌چرخند و پیام دوم را نشان می‌دهند. سطح جلویی برای اقدام اصلی و سطح پشتی برای جمله تشویقی یا اطلاع تکمیلی است. حرکت با پرسپکتیو واقعی سه‌بعدی انجام می‌شود و حس تعامل باکیفیتی می‌سازد. برای CTA کمپین‌ها و بخش‌های خلاقانه لندینگ‌ها پیشنهاد می‌شود.

پرسش‌های متداول

متن سطح جلویی در span اول و متن سطح پشتی در span دوم قرار دارد. هر دو را مستقیماً در HTML عوض کنید.

افکت چرخش به پشتیبانی مرورگرهای مدرن از transform سه‌بعدی نیاز دارد. در مرورگرهای بسیار قدیمی فقط سطح جلویی دیده می‌شود و دکمه همچنان کار می‌کند.

مقدار rotateX را در حالت هاور به rotateY تغییر دهید تا چرخش افقی شود. زمان حرکت هم در transition قابل تنظیم است.

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

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

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

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

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

کپچا

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

شاید بپسندی

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

دکمه سکه‌ای چرخان

در هاور مثل سکه ۳۶۰ درجه می‌چرخد و در حین چرخش رنگ عوض می‌کند؛ افکتی سرگرم‌کننده برای محصو…

دکمه چرخش سه‌بعدی
۱۲۰ ۳۰
۴.۳ (۴)
پیش‌نمایش زنده اسنیپت

دکمه سه‌بعدی نرم صورتی

دکمه‌ای صورتی با لبه پایین ضخیم‌تر که در کلیک، کل دکمه به پایین فرو می‌رود و لبه جمع می‌شو…

دکمه سه‌بعدی لمسی
۴۱۱ ۱۰۰
۴.۲ (۱۶)
پیش‌نمایش زنده اسنیپت

دکمه سه‌بعدی مکانیکی

دکمه‌ای با لبه پایین سخت که مثل کلید واقعی در کلیک فرو می‌رود و بازخورد لمسی قوی به کاربر…

دکمه سه‌بعدی فشاری
۴۰۴ ۱۰۰
۴.۲ (۱۶)