Das Neumorphismus-Design (Neumorphism) ist ein moderner Stil, der den visuellen Eindruck erweckt, als wäre ein Element aus dem Hintergrund herausgepresst oder in diesen eingelassen. In diesem Snippet verwenden wir ausschließlich HTML und CSS, um einen Button zu gestalten, der durch realistische Licht- und Schatteneffekte beim Hovern oder Klicken eine greifbare Tiefe erhält.

Code

Kopieren Sie den folgenden Code und fügen Sie ihn in Ihr Projekt ein.

<!-- 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;
  /* Normaler Zustand: Äußerer Schatten für einen erhabenen Effekt */
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), 
             -9px -9px 16px rgba(255, 255, 255, 0.5);
}

.neumorphism-btn:hover {
  /* Hover-Zustand: Kleinerer Schatten deutet auf das Herunterdrücken hin */
  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 {
  /* Aktiver (Klick-) Zustand: Innerer Schatten für einen vertieften Effekt */
  box-shadow: inset 6px 6px 10px 0 rgba(163, 177, 198, 0.6), 
              inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
}

Erläuterung