CSS Gradient Button Tasarımı Rehberi

Gradient butonlar modern web arayüzlerinde sıkça kullanılır. Düz renkli butonlara göre daha canlı ve dikkat çekici bir görünüm sunarlar. Bu rehberde gradient buton oluşturma, hover efektleri, geçiş animasyonları, 3D efektler ve erişilebilirlik konularını ele alıyoruz.

Temel Gradient Buton

En basit gradient buton, background özelliğine linear-gradient atanarak elde edilir. Buton metni için yeterli kontrast sağlamak önemlidir; gradient koyu tonlardan oluşuyorsa beyaz metin, açık tonlardan oluşuyorsa koyu metin kullanın.

.btn-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}

Hover Efektleri

Gradient doğrudan animasyon edilemediği için hover'da farklı efektler kullanılır: gradient açısını değiştirme, renk yoğunluğunu artırma (filter: brightness), veya pseudo-element ile üzerine başka bir gradient katmanı ekleyip opacity ile geçiş yapma.

.btn-gradient-hover {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  transition: filter 0.3s ease, transform 0.2s ease;
}
.btn-gradient-hover:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

Pseudo-element ile Hover Geçişi

İki farklı gradient arasında yumuşak geçiş için ::before veya ::after kullanılabilir. Hover'da pseudo-elementin opacity değeri 0'dan 1'e geçer.

.btn-gradient-layers {
  position: relative;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  overflow: hidden;
}
.btn-gradient-layers::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn-gradient-layers:hover::before {
  opacity: 1;
}
.btn-gradient-layers span {
  position: relative;
  z-index: 1;
}

Transition ve Animasyon

Buton etkileşimlerinde transition kullanarak kullanıcı deneyimini iyileştirin. filter, transform ve box-shadow gibi özellikler performanslı şekilde animasyon edilebilir. will-change gereksiz yere kullanılmamalı; sadece gerçekten performans sorunu varsa eklenmelidir.

.btn-smooth {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.btn-smooth:hover {
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
  transform: translateY(-2px);
}
.btn-smooth:active {
  transform: translateY(0);
}

3D Efektler

Gradient butona 3D derinlik hissi vermek için box-shadow katmanları veya sahte gölge (alt-border) kullanılabilir. "Basılı" görünüm için :active durumunda transform: translateY veya box-shadow azaltılır.

.btn-3d {
  background: linear-gradient(180deg, #667eea 0%, #5a67d8 50%, #4c51bf 100%);
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 0 #434190, 0 6px 10px rgba(0,0,0,0.2);
  transition: box-shadow 0.2s, transform 0.2s;
}
.btn-3d:hover {
  box-shadow: 0 6px 0 #434190, 0 8px 15px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}
.btn-3d:active {
  box-shadow: 0 2px 0 #434190, 0 2px 5px rgba(0,0,0,0.2);
  transform: translateY(2px);
}

Erişilebilirlik

Gradient butonlarda erişilebilirlik kritik öneme sahiptir. Metin ile arka plan arasında en az 4.5:1 kontrast oranı (AA) veya 7:1 (AAA) hedeflenmelidir. Focus durumunda görünür bir outline veya ring kullanın; outline: none kullanıyorsanız mutlaka alternatif focus stili (örn. box-shadow) ekleyin.

prefers-reduced-motion: reduce medya sorgusu ile animasyonları azaltın veya kapatın. Touch hedefleri en az 44x44 piksel olmalıdır.

.btn-accessible:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

Özet

CSS gradient buton tasarımında temel gradient, hover efektleri, transition ve 3D efektler bir arada kullanılabilir. Erişilebilirlik için kontrast ve focus stillerine dikkat edin. Gradient Oluşturucu ile renk paletlerinizi oluşturup butonlarda test edebilirsiniz. İlgili rehberler: Gradient Border, Gradient Hero Section ve CSS Gradient Overlay.