پیشنمایش زنده (iframe sandbox)
تمامصفحه
<button class="radikalwp-btn-glass-dark">مشاهده دمو<//button>
.radikalwp-btn-glass-dark {
padding: 13px 34px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: #e2e8f0;
background: rgba(15, 23, 42, .55);
border: 1px solid rgba(148, 163, 184, .35);
border-radius: 14px;
cursor: pointer;
backdrop-filter: blur(10px);
box-shadow: 0 10px 28px rgba(2, 6, 23, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
transition: background .25s ease, color .25s ease, transform .2s ease;
}
.radikalwp-btn-glass-dark:hover {
color: #fff;
background: rgba(30, 41, 59, .75);
transform: translateY(-2px);
}
درباره این اسنیپت
نسخه تیره سبک گلسمورفیسم با پسزمینه نیمهشفاف دودی، بلور نرم و حاشیه ظریف روشن. روی هدرهای تصویری، بنرهای شبانه و بخشهای تیره سایت بینقص مینشیند. در هاور سطح روشنتر میشود و دکمه کمی شناور بالا میرود تا بازخورد واضح بدهد. فونت آن از قالب والد ارث میرسد و بهراحتی با هر طرحی هماهنگ میشود.
پرسشهای متداول
خیر؛ خود دکمه مستقل است و روی هر پسزمینهای مینشیند، اما روی زمینه تیره یا تصویر رنگی زیباتر دیده میشود.
مقدار backdrop-filter: blur را کم یا زیاد کنید. اعداد بالاتر شیشه ماتتری میسازند و اعداد پایینتر شفافیت بیشتری میدهند.
بله؛ کد بدون محدودیت در پروژههای شخصی و تجاری قابل استفاده است و نیازی به ذکر منبع ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۴ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!