پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<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)

شیشه‌ای دکمه مدرن
۲۲
۴.۰ (۳)
پیش‌نمایش زنده اسنیپت

دکمه شفاف با پس‌زمینه متحرک

دکمه شیشه‌ای گرادیان متحرک
۱۸
۴.۶ (۳)

اشتراک حرفه‌ای

دسترسی کامل به همه قالب‌ها و کدهای آماده با به‌روزرسانی هفتگی.

پیش‌نمایش زنده اسنیپت

کارت شیشه‌ای مات

کارت شیشه‌ای گلس‌مورفیسم
۱۵
۴.۴ (۳)