<button class="radikalwp-btn-borderslide"><span>مشاهده نمونهکارها<//span><//button>
.radikalwp-btn-borderslide {
position: relative;
padding: 2px;
border: none;
background: transparent;
border-radius: 14px;
cursor: pointer;
overflow: hidden;
}
.radikalwp-btn-borderslide::before {
content: "";
position: absolute;
inset: -150%;
background: conic-gradient(#4f46e5, #ec4899, #4f46e5);
animation: radikalwp-borderslide-spin 3s linear infinite;
opacity: 0;
transition: opacity .3s ease;
}
.radikalwp-btn-borderslide:hover::before { opacity: 1; }
.radikalwp-btn-borderslide span {
position: relative;
display: inline-block;
padding: 12px 32px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: #4f46e5;
background: #fff;
border-radius: 12.5px;
transition: color .3s ease;
}
.radikalwp-btn-borderslide:hover span { color: #312e81; }
@keyframes radikalwp-borderslide-spin {
to { transform: rotate(1turn); }
}
درباره این اسنیپت
دکمهای مینیمال که در حالت عادی فقط یک حاشیه ظریف دارد و در هاور، حاشیه بهصورت مسیر کشویی دور تا دور دکمه را رسم میکند. افکت «رسم قاب» با گرادیان مخروطی و چرخش آن ساخته میشود و ظاهری لوکس و مینیمال دارد. برای سایتهای شرکتی، پرتفولیو و دکمههای ثانویه مناسب است.
پرسشهای متداول
یک لایه گرادیان مخروطی در حال چرخش پشت دکمه قرار دارد و لایه داخلی با رنگ پسزمینه فقط یک حلقه باریک آن را در قاب نشان میدهد؛ نتیجه، حاشیهای متحرک و رنگینکمانی است.
بله؛ مقدار padding دکمه بیرونی (المان با کلاس radikalwp-btn-borderslide) ضخامت حاشیه را تعیین میکند. عدد کوچکتر مثل 1.5px حاشیه ظریفتری میسازد.
بله؛ فقط رنگ پسزمینه span داخلی را به رنگ پسزمینه سایت خود تغییر دهید تا قاب بهدرستی نمایش داده شود.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۸ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!