<button class="radikalwp-btn-glass">دریافت اپلیکیشن<//button>
.radikalwp-btn-glass {
padding: 13px 36px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: #fff;
background: rgba(255, 255, 255, .14);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 999px;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
transition: background .3s ease, border-color .3s ease;
}
.radikalwp-btn-glass:hover {
background: rgba(255, 255, 255, .24);
border-color: rgba(255, 255, 255, .55);
}
درباره این اسنیپت
دکمهای با افکت شیشه مات که پسزمینه پشت خود را محو و شفاف نشان میدهد و با حاشیه نیمهشفاف مرز ظریفی دارد. در هاور، شفافیت و میزان ماتی کمی تغییر میکند و حس عمق واقعی شیشه منتقل میشود. برای هدرهای گرادیانی، بنرهای تصویری و رابطهای مدرن گلسمورفیسم عالی است. پشتیبانی مرورگرها با backdrop-filter فراگیر است.
پرسشهای متداول
افکت شیشه مات برای درخشش به یک پسزمینه رنگی یا تصویر پشت خودش نیاز دارد. دکمه را روی بنر گرادیانی یا تصویر قرار دهید تا افکت blur دیده شود.
مرورگرهایی که backdrop-filter ندارند فقط پسزمینه نیمهشفاف را نشان میدهند؛ دکمه همچنان خوانا و کاربردی میماند و چیزی نمیشکند.
بله؛ رنگ متن در ویژگی color و شدت قاب در border با مقدار rgba کنترل میشود. برای پسزمینههای روشن بهتر است متن را تیره کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۵ از ۱۲ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
دکمه شیشهای (Glassmorphism)
دکمه شفاف با پسزمینه متحرک
اشتراک حرفهای
دسترسی کامل به همه قالبها و کدهای آماده با بهروزرسانی هفتگی.
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!