پیش‌نمایش زنده (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 را کم یا زیاد کنید. اعداد بالاتر شیشه مات‌تری می‌سازند و اعداد پایین‌تر شفافیت بیشتری می‌دهند.

بله؛ کد بدون محدودیت در پروژه‌های شخصی و تجاری قابل استفاده است و نیازی به ذکر منبع ندارد.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۴ از ۳ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

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

دکمه شیشه‌ای فروزن

دکمه شیشه گلس‌مورفیسم
۳۲
۴.۶ (۵)
پیش‌نمایش زنده اسنیپت

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

دکمه شیشه‌ای گلس‌مورفیسم
۸۰
۴.۵ (۱۲)
پیش‌نمایش زنده اسنیپت

دکمه نئون درخشان

دکمه نئون درخشش
۸۰
۴.۶ (۱۲)