<button class="radikalwp-btn-shine"><span>خرید ویژه<//span><//button>
.radikalwp-btn-shine {
position: relative;
padding: 13px 34px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #0f172a, #334155);
cursor: pointer;
overflow: hidden;
}
.radikalwp-btn-shine span {
position: relative;
z-index: 1;
font-family: inherit;
font-size: 16px;
font-weight: 700;
color: #fbbf24;
}
.radikalwp-btn-shine::after {
content: '';
position: absolute;
top: 0;
right: -80%;
width: 45%;
height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
transform: skewX(-20deg);
animation: radikalwp-shine-move 2.8s ease-in-out infinite;
}
@keyframes radikalwp-shine-move { 0%, 60% { right: -80%; } 100% { right: 140%; } }
درباره این اسنیپت
درخشش فلزی که هر چند ثانیه یکبار از روی دکمه عبور میکند؛ حتی بدون هاور هم زنده است. این دکمه برای فراخوانهای اقدام (CTA)، فرمها و ناوبری طراحی شده است. رنگها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آنها را با پالت برند خودتان هماهنگ کنید. پشتیبانی کامل راستچین (RTL) دارد و در حالت تیره سایت نیز ظاهر مناسبی خواهد داشت.
پرسشهای متداول
کافی است کد HTML و CSS این دکمه را کپی کنید و در فایل پروژه یا ویجت HTML المنتور جایگذاری کنید. هیچ نصب یا وابستگی اضافهای لازم نیست و همهچیز با CSS خالص کار میکند.
بله. کلاسها با پیشوند radikalwp ایزوله شدهاند تا با استایل قالب شما تداخل نکنند؛ کافی است کد را داخل ویجت HTML المنتور بگذارید. برای شخصیسازی رنگها هم کافی است مقادیر hex در CSS را عوض کنید.
در CSS این کد، مقادیر رنگ (hex یا rgb) را پیدا کنید و با کد رنگ برند خود جایگزین کنید. چیدمان و انیمیشنها دستنخورده میمانند و فقط ظاهر رنگی تغییر میکند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۵ از ۴ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
دکمه جاروی روشنی
درخششی از راست به چپ روی دکمه حرکت میکند (shine sweep)؛ برای دکمه اصلی صفحه اصلی پیشنهاد…
دکمه خط دور متحرک
حاشیهای که با هاور دور تا دور دکمه را میکشد و مسیر موس را دنبال میکند؛ افکتی شیک و حرفه…
دکمه حاشیه متحرک
دکمهای که گرادیان حاشیهاش دائماً میچرخد؛ جلبتوجه بالا برای تخفیفها و رویدادها. این دک…
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!