<div class="radikalwp-in-group"><input type="text" placeholder="کد تخفیف" value="RWP20"><button>اعمال<//button><//div>
.radikalwp-in-group {
display: flex;
width: 280px;
font-family: inherit;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 11px;
overflow: hidden;
transition: border-color .3s ease, box-shadow .3s ease;
}
.radikalwp-in-group:focus-within { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .14); }
.radikalwp-in-group input {
flex: 1;
min-width: 0;
padding: 11px 14px;
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
letter-spacing: 1px;
color: #1e293b;
border: none;
outline: none;
}
.radikalwp-in-group input::placeholder { letter-spacing: 0; font-weight: 400; color: #94a3b8; }
.radikalwp-in-group button {
padding: 0 22px;
font-family: inherit;
font-size: 13px;
font-weight: 700;
color: #fff;
background: #f59e0b;
border: none;
cursor: pointer;
transition: background .3s ease;
}
.radikalwp-in-group button:hover { background: #d97706; }
درباره این اسنیپت
فیلد و دکمه چسبیده به هم (Input Group) برای کد تخفیف و لینکها؛ فشرده و کاربردی. این فیلد برای فرمهای ورود، ثبتنام، جستجو و فیلتر طراحی شده و فوکوس و حالتهای خطا را پوشش میدهد. همه کلاسها با پیشوند radikalwp شروع میشوند تا با استایلهای قالب شما تداخلی پیش نیاید و راحتتر شخصیسازی شوند. انیمیشنها با GPU-friendly خواص transform و opacity ساخته شدهاند تا سرعت سایت شما تحت تأثیر قرار نگیرد.
پرسشهای متداول
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۰ از ۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!