<button class="radikalwp-btn-sweep">خرید اشتراک<//button>
.radikalwp-btn-sweep {
position: relative;
padding: 13px 36px;
font-family: inherit;
font-size: 15px;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, #059669, #10b981);
border: none;
border-radius: 12px;
cursor: pointer;
overflow: hidden;
box-shadow: 0 8px 22px rgba(16, 185, 129, .35);
}
.radikalwp-btn-sweep::after {
content: "";
position: absolute;
top: 0;
left: -80%;
width: 45%;
height: 100%;
background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent);
transform: skewX(-20deg);
animation: radikalwp-btn-sweep-shine 3.2s ease-in-out infinite;
}
@keyframes radikalwp-btn-sweep-shine {
0% { left: -80%; }
55% { left: 130%; }
100% { left: 130%; }
}
درباره این اسنیپت
دکمهای سبز با نوار نورانی باریکی که هر چند ثانیه یکبار از روی سطح آن عبور میکند، مثل بازتاب نور روی جلای براق. افکت با یک pseudo-element مورب و انیمیشن موقعیت ساخته میشود و توجه کاربر را بدون تحریککنندگی جلب میکند. برای دکمههای خرید، اشتراک و اقدامهای مالی مناسب است.
پرسشهای متداول
مدت انیمیشن در ویژگی animation (عدد 3.2s) تعیین میشود. عدد بزرگتر یعنی عبور کمتر و آرامتر؛ درصد 55 هم تعیین میکند نور چه بخشی از زمان را در مسیر بماند.
بله؛ گرادیان خط background را با دو رنگ برند خود جایگزین کنید. شدت درخشش را هم با شفافیت رنگ سفید در ::after تنظیم کنید.
خیر؛ انیمیشن فقط روی left یک لایه دکمه اجرا میشود و بار پردازشی ناچیزی دارد. برای بهینهتر شدن میتوانید left را به transform تغییر دهید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۰ از ۶ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
دکمه جاروی روشنی
درخششی از راست به چپ روی دکمه حرکت میکند (shine sweep)؛ برای دکمه اصلی صفحه اصلی پیشنهاد…
دکمه کروم براق
پسزمینه متالیک براق با بازتاب نوری که در هاور از روی دکمه میگذرد؛ حس پریمیوم و لوکس مید…
دکمه برق فلزی
درخشش فلزی که هر چند ثانیه یکبار از روی دکمه عبور میکند؛ حتی بدون هاور هم زنده است. این…
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!