<button class="radikalwp-btn-flip" data-alt="بزن بریم!"><span>دانلود قالب<//span><//button>
.radikalwp-btn-flip {
position: relative;
padding: 13px 32px;
font-family: inherit;
border: 2px solid #10b981;
background: transparent;
border-radius: 10px;
cursor: pointer;
overflow: hidden;
}
.radikalwp-btn-flip span {
display: block;
font-size: 16px;
font-weight: 700;
color: #10b981;
transition: transform .3s ease;
}
.radikalwp-btn-flip::after {
content: attr(data-alt);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: inherit;
font-size: 16px;
font-weight: 700;
color: #fff;
background: #10b981;
transform: translateY(100%);
transition: transform .3s ease;
}
.radikalwp-btn-flip:hover span { transform: translateY(-120%); }
.radikalwp-btn-flip:hover::after { transform: translateY(0); }
درباره این اسنیپت
متن دکمه هنگام هاور به بالا میلغزد و کپی دوم از پایین جای آن را میگیرد؛ افکت حرفهای سایتهای خارجی. این دکمه برای فراخوانهای اقدام (CTA)، فرمها و ناوبری طراحی شده است. ساختار HTML حداقلی دارد و افزودن یا حذف تکرار المانها بدون بههمریختگی انجام میشود. رنگها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آنها را با پالت برند خودتان هماهنگ کنید.
پرسشهای متداول
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۸ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!