<button class="radikalwp-btn-aurora">همین حالا شروع کن<//button>
.radikalwp-btn-aurora {
padding: 14px 38px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: #fff;
background: linear-gradient(115deg, #22d3ee, #818cf8, #e879f9, #22d3ee);
background-size: 280% 100%;
border: none;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 10px 26px rgba(129, 140, 248, .38);
animation: radikalwp-aurora-flow 6s ease infinite;
transition: transform .25s ease, box-shadow .25s ease;
}
.radikalwp-btn-aurora:hover {
transform: scale(1.04);
box-shadow: 0 14px 34px rgba(129, 140, 248, .55);
}
@keyframes radikalwp-aurora-flow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
درباره این اسنیپت
دکمهای با پسزمینه گرادیانی چندرنگ که آهسته مانند شفق قطبی جابهجا میشود و در هاور کمی بزرگنمایی میگردد. لبههای گرد و سایه رنگی نرم به آن حس مدرن و آرام میدهد. برای فراخوانهای اقدام اصلی لندینگ، دکمه ثبتنام و شروع استفاده گزینهای جذاب است. تمام افکت با CSS خالص ساخته شده و روی همه مرورگرهای مدرن روان اجرا میشود.
پرسشهای متداول
کد HTML را در محل دلخواه صفحه و کد CSS را در فایل استایل پروژه یا داخل ویجت HTML المنتور قرار دهید. هیچ فایل خارجی لازم نیست و انیمیشن با CSS خالص اجرا میشود.
بله؛ افکت فقط از ویژگی background-position استفاده میکند که برای پردازنده گرافیکی موبایل سبک است و باعث لگ یا پرش صفحه نمیشود.
بله؛ کافی است مقادیر رنگ در خط background را تغییر دهید. میتوانید از ابزار مولد گرادیان رادیکالدبلیوپی برای ساخت رنگ دلخواه استفاده کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۷ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!