Neumorphism Buton

Neumorphism (Yeni Skeuomorphism) tasarımı, kullanıcı arayüzündeki öğelerin arka plandan dışarı doğru kabartıldığı veya yüzeyin içine oyulduğu hissini veren modern bir görsel stildir. Bu snippet’te tamamen HTML ve CSS kodları kullanarak, öğenin üzerine gelindiğinde (hover) veya tıklandığında (active) gerçekçi bir kabarma/çökme efekti sunan estetik bir buton oluşturuyoruz.

Uygulama Kodu

Aşağıdaki kodu kopyalayarak projenize dahil edebilirsiniz.

<!-- HTML -->
<div class="neumorphism-wrapper">
  <button class="neumorphism-btn">Neumorphism</button>
</div>

/* CSS */
.neumorphism-wrapper {
  background-color: #e0e5ec;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.neumorphism-btn {
  background-color: #e0e5ec;
  color: #4a5568;
  border: none;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  /* Normal durum: Dışarıya gölge vererek kabartma etkisi yaratır */
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), 
             -9px -9px 16px rgba(255, 255, 255, 0.5);
}

.neumorphism-btn:hover {
  /* Hover durumu: Gölgeyi biraz küçülterek içeri basılma öncesini ifade eder */
  box-shadow: 5px 5px 10px rgba(163, 177, 198, 0.6), 
             -5px -5px 10px rgba(255, 255, 255, 0.5);
  color: #2d3748;
}

.neumorphism-btn:active {
  /* Aktif (Tıklanma) durumu: İçeriye gölge vererek çöküntü ifade eder */
  box-shadow: inset 6px 6px 10px 0 rgba(163, 177, 198, 0.6), 
              inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
}

Açıklama

Arka Plan Rengi Uyumu: Neumorphism tarzının temel prensibi olarak, butonun arka plan rengi ile onu saran kapsayıcının (container) arka plan rengi (#e0e5ec) tamamen aynı olmalıdır.
İkili Gölge Kullanımı (box-shadow): Sol üst köşeye açık/parlak bir gölge (ışık kaynağını simüle etmek için), sağ alt köşeye ise koyu renkli bir gölge eklenerek güçlü bir üç boyutluluk hissi yaratılır.
Aktif (Tıklanma) Durumu: Butona basıldığı anda inset özelliğinde box-shadow değeri kullanılarak, öğenin fiziksel olarak içeri doğru gömüldüğü izlenimi verilir.