پیشنمایش زنده (iframe sandbox)
تمامصفحه
<button class="radikalwp-btn-edgeglow">بیشتر بدانید<//button>
.radikalwp-btn-edgeglow {
padding: 13px 36px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: #c4b5fd;
background: #17103a;
border: 1.5px solid #312e81;
border-radius: 12px;
cursor: pointer;
transition: border-color .3s ease, box-shadow .3s ease, color .3s ease, text-shadow .3s ease;
}
.radikalwp-btn-edgeglow:hover {
color: #ede9fe;
border-color: #8b5cf6;
box-shadow: 0 0 0 1px #8b5cf6, 0 0 24px rgba(139, 92, 246, .55), inset 0 0 14px rgba(139, 92, 246, .2);
text-shadow: 0 0 10px rgba(237, 233, 254, .6);
}
درباره این اسنیپت
دکمهای تیره که در هاور، یک هاله نوری گرم دور لبههایش روشن میشود و متن داخلش کمی درخشان میگردد. برخلاف دکمههای پالسدار، این افکت فقط هنگام تعامل کاربر فعال است و در حالت عادی آرام و مینیمال است. برای پسزمینههای تیره، هدر لندینگ و بخشهای CTA کمرنگ مناسب است.
پرسشهای متداول
این طراحی عمدی است تا صفحه در حالت ساکن مینیمال بماند و توجه فقط هنگام تعامل به دکمه جلب شود؛ برای سایتهای شلوغ انتخابی آرامبخش است.
مقدار شفافیت در box-shadow (عدد .55 و .2) را کاهش دهید؛ مثلاً .3 برای هاله ملایمتر.
هاله روی زمینه روشن کماثر میشود؛ برای پسزمینه روشن بهتر است نسخه سایه رنگی یا درخشش عبوری را انتخاب کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۷ از ۷ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!