طراحی دکمه های شیشه ای با CSS Glassmorphism

Glassmorphism سبکی در طراحی رابط کاربری است که از شفافیت، بلور (blur) و سایه برای شبیه‌سازی سطح شیشه‌ای استفاده می‌کند. در این مقاله اصول، نمونه‌های عملی کد، نکات سازگاری و بهینه‌سازی برای ساخت دکمه‌های شیشه‌ای را به زبان فارسی توضیح می‌دهم تا بتوانید دکمه‌هایی زیبا، قابل استفاده و قابل دسترس تولید کنید.

مفاهیم پایه

ایدهٔ اصلی Glassmorphism ترکیب سه عنصر است:

• شفافیت یا نیمه‌شفاف بودن پس‌زمینه (opacity/rgba)
• اثر بلور روی محتویات پشت عنصر (backdrop-filter: blur)
• مرز روشن یا نیمه‌شفاف (subtle border یا frosted border) و سایه برای عمق

برای دکمه‌ها باید تعادل بین زیبایی و دسترسی را حفظ کنید: کنتراست متن، پاسخگویی به رفتارهای کاربر و پشتیبانی از مرورگرهای قدیمی.

نمونهٔ پایه با backdrop-filter

/* HTML:
Click me
*/
/* CSS */:root{
  --glass-bg: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.25);
  --glass-radius: 12px;
  --glass-blur: 8px;
  --accent: #6ee7b7;
  --text: #ffffff;
}

.glass-btn{
  position: relative;
  display: inline-block;
  padding: 0.6rem 1.1rem;
  color: var(--text);
  background: var(--glass-bg);
  border-radius: var(--glass-radius);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  cursor: pointer;
  font-weight: 600;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.glass-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.30);
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
}

.glass-btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,0.28);
}

این کد یک دکمهٔ ساده ایجاد می‌کند که از backdrop-filter برای ایجاد افکت بلور استفاده می‌کند. متغیرهای CSS در روت تعریف شده تا بتوانید رنگ‌ها، شعاع‌ و میزان بلور را به‌راحتی تغییر دهید. استایل hover و active برای بازخورد لمسی و تعاملی اضافه شده‌اند.

توضیح تخصصی درباره backdrop-filter و پشتیبانی

خاصیت backdrop-filter محتوای پشت عنصر را بلور یا تغییر می‌دهد و تجربهٔ شیشه‌ای واقعی ایجاد می‌کند. اما در برخی مرورگرها (نسخه‌های قدیمی‌تر یا بعضی مرورگرهای موبایل) پشتیبانی کامل وجود ندارد. همیشه با یک پس‌زمینهٔ نیمه‌شفاف (مثلاً rgba) و یک مرز ظریف fallback ارائه دهید.

فیت‌بک و fallback برای مرورگرهای بدون پشتیبانی

/* Fallback approach using a blurred pseudo-element */.glass-btn{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.08); /* fallback */}

.glass-btn::before{
  content: "";
  position: absolute;
  inset: -10%;
  background: inherit;
  filter: blur(10px);
  transform: scale(1.05);
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
}

.glass-btn > *{ /* content on top */  position: relative;
  z-index: 1;
}

اینجا با استفاده از یک شبه‌المان (::before) یک نسخهٔ محو شده از پس‌زمینه می‌سازیم که به شکل شیشه‌ای نزدیک می‌شود. این روش به‌ویژه وقتی backdrop-filter در دسترس نیست مفید است؛ هرچند عملکرد دقیق و نمای بصری با نوع و موقعیت پس‌زمینه متفاوت خواهد بود.

نسخهٔ تکامل‌یافته: متغیرها، آیکون و حالت‌های در دسترس

/* Add accessible focus, disabled, and icon spacing */.glass-btn{
  --pad-y: 0.6rem;
  --pad-x: 1.1rem;
  padding: var(--pad-y) var(--pad-x);
  outline: none;
}

.glass-btn:focus{
  box-shadow: 0 0 0 3px rgba(110,231,183,0.18), 0 8px 24px rgba(0,0,0,0.25);
}

.glass-btn[disabled], .glass-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* respects user preference for reduced motion */@media (prefers-reduced-motion: reduce){
  .glass-btn{ transition: none; transform: none; }
}

در این قسمت به دسترس‌پذیری پرداختیم: حالت فوکوس روشن، حالت غیرفعال و احترام به تنظیمات کاربر برای کاهش حرکت. این موارد برای رعایت استانداردهای WCAG و تجربهٔ کاربری ضروری هستند.

موارد استفاده و نکات عملی

• از دکمه‌های شیشه‌ای در پنل‌ها، کارت‌ها و هدرها استفاده کنید تا عمق و لایه‌بندی را تشدید کنید.
• برای متن دکمه کنتراست کافی را حفظ کنید؛ اگر پس‌زمینهٔ پشت شیشه خیلی روشن است، از متن تیره یا سایهٔ متن استفاده کنید.
• اگر پروژه شما نیاز به عملکرد بالا در موبایل دارد، میزان بلور را کم کنید چون عملیات بلور هزینهٔ پردازشی دارد.
• ترکیب با گرادیان‌های ملایم و اکستنشن رنگی (accent) می‌تواند ظاهر مدرن‌تری بدهد.

مثال کامل: دکمه شیشه‌ای با آیکون و رنگ اکشن

<button class="glass-btn primary">
  <svg width="16" height="16" aria-hidden="true">...</svg>
  Send
</button>

/* CSS (excerpt) */.glass-btn.primary{
  --glass-bg: rgba(17, 24, 39, 0.18);
  --glass-border: rgba(255,255,255,0.12);
  color: #ecfeff;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(6px);
}

در این نمونه دکمهٔ اولیه (primary) با آیکون و گرادیان ملایم ساخته شده است. برای آیکون از SVG استفاده کنید تا با رنگ متن هماهنگ بماند و رزولوشن مستقل از صفحه نمایش داشته باشد.

عملکرد و بهترین شیوه‌ها

• میزان blur را پایین نگه دارید (4–12px) تا هزینهٔ رندر کاهش یابد.
• از عناصر بزرگ با blur بالا در صفحات متحرک خودداری کنید؛ بهتر است افکت روی اجزای کوچک‌تر اعمال شود.
• با ابزارهای توسعه مرورگر تست کنید و fallback را در مرورگرهای محبوب بررسی کنید.

جدول پشتیبانی کلی (خلاصه)

جمع‌بندی و توصیه نهایی

دکمه‌های شیشه‌ای می‌توانند جلوهٔ بصری قدرتمندی به رابط شما اضافه کنند اما باید آن‌ها را به‌صورت Progressive Enhancement و با رعایت دسترسی و عملکرد پیاده‌سازی کنید. از CSS Variables، کنترل حالت‌های تعاملی، و fallback‌های ساده استفاده کنید تا تجربهٔ یکنواختی در همهٔ دستگاه‌ها ارائه شود.

اگر مایل باشید، می‌توانم یک مجموعهٔ کامل از کلاس‌های دکمه (primary, secondary, ghost) همراه با نسخه‌های React / Vue یا نسخهٔ SCSS آماده برای پروژهٔ شما تولید کنم.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال