<button class="radikalwp-btn-fill"><span>ثبتنام<//span><//button>
.radikalwp-btn-fill {
position: relative;
padding: 13px 32px;
font-size: 16px;
font-family: inherit;
color: #16a34a;
background: transparent;
border: 2px solid #16a34a;
border-radius: 12px;
cursor: pointer;
overflow: hidden;
z-index: 0;
transition: color .35s ease;
}
.radikalwp-btn-fill::before {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 0;
background: #16a34a;
transition: height .35s ease;
z-index: -1;
}
.radikalwp-btn-fill:hover { color: #fff; }
.radikalwp-btn-fill:hover::before { height: 100%; }
درباره این اسنیپت
دکمه خطی که پسزمینه آن هنگام هاور از پایین با رنگ پر میشود؛ افکت ظریف و حرفهای. این دکمه برای فراخوانهای اقدام (CTA)، فرمها و ناوبری طراحی شده است. ساختار HTML حداقلی دارد و افزودن یا حذف تکرار المانها بدون بههمریختگی انجام میشود. رنگها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آنها را با پالت برند خودتان هماهنگ کنید.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۶ از ۷ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!