Neumorphismus-Button

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

Einheitliche Hintergrundfarbe: Grundvoraussetzung für den Neumorphismus-Effekt ist, dass die Hintergrundfarbe des Elements und die des übergeordneten Containers (#e0e5ec) exakt übereinstimmen.
Zwei Schatten (box-shadow): Ein heller Schatten oben links (simuliert die Lichtquelle) und ein dunkler Schatten unten rechts erzeugen im Zusammenspiel den plastischen 3D-Effekt.
Aktiver Zustand: Durch den Einsatz von inset beim box-shadow entsteht die optische Täuschung, dass der Button beim Klicken in den Hintergrund gedrückt wird.