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