Güzel bir buton, birkaç CSS özelliğiyle yapılır: renk, iç boşluk, yuvarlak köşe, gölge ve hover efekti.

Temel buton

Renk, boşluk ve yuvarlak köşe ver.

.btn {
  background: #00e5ff;
  color: #001;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

Hover efekti

Fareyle üzerine gelince yumuşak bir değişim ekle.

.btn {
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 229, 255, 0.4);
}

İpuçları

  • cursor: pointer imleci el şekline getirir.
  • transition ile efektleri yumuşat.
  • Erişilebilirlik için yeterli renk kontrastı kullan.

CSS derslerimizle tasarımı pekiştir.