Button mit Hover-Effekt

Ein stilvoller Button mit einem sanften Hover-Effekt, der die Farbe ändert und einen Schatten hinzufügt.

Demo

Code

HTML
CSS
JavaScript
<button class="hover-button">Hover mich</button>
.hover-button {
  padding: 12px 24px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hover-button:hover {
  background-color: #45a049;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}

Erklärung

Dieser Button verwendet CSS-Transitionen, um einen sanften Übergangseffekt zu erzeugen, wenn der Benutzer mit der Maus darüber fährt.

Die wichtigsten Eigenschaften sind:

  • transition: all 0.3s ease; - Sorgt für einen sanften Übergang aller Änderungen über 0,3 Sekunden
  • transform: translateY(-2px); - Bewegt den Button leicht nach oben beim Hover
  • box-shadow - Fügt einen subtilen Schatten hinzu, um einen "schwebenden" Effekt zu erzeugen

Verwendung

Dieser Button kann für Call-to-Action-Elemente auf deiner Webseite verwendet werden, um die Aufmerksamkeit der Benutzer zu gewinnen.