پیشنمایش زنده (iframe sandbox)
تمامصفحه
<button class="radikalwp-btn-outlinefill">دانلود کاتالوگ<//button>
.radikalwp-btn-outlinefill {
padding: 12px 34px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: #7c3aed;
background: linear-gradient(to left, #7c3aed 50%, transparent 50%);
background-size: 200% 100%;
background-position: left;
border: 2px solid #7c3aed;
border-radius: 12px;
cursor: pointer;
transition: background-position .35s ease, color .35s ease;
}
.radikalwp-btn-outlinefill:hover {
background-position: right;
color: #fff;
}
درباره این اسنیپت
دکمهای خطی که در هاور، پسزمینه از سمت راست تا چپ داخل آن جاری میشود و رنگ متن برعکس میگردد. تقابل دو حالت خطی و توپر، حس پیشرفت و تکمیل منتقل میکند و برای منوها و دکمههای ثانویه جذاب است. افکت با background-size و transition ساخته شده و بدون هیچ لایه اضافهای است.
پرسشهای متداول
کافی است جهت گرادیان به to right و مقدار background-position به right/left برعکس شود؛ منطق افکت همان است.
بله؛ در هاور رنگ متن به سفید تغییر میکند تا روی پسزمینه بنفش کاملاً خوانا باشد. اگر رنگ برند شما روشن است، رنگ متن را تیرهتر انتخاب کنید.
بله؛ border-radius را به صفر کاهش دهید تا سبک تیز و معماریگونه پیدا کند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۳ از ۴ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!