Button

Der Button (btn) wurde mit abgerundeten Ecken, einem animierten Farbverlaufshintergrund und gut lesbarem weißen Text gestaltet. Er ist darauf ausgelegt, auf Benutzerinteraktionen zu reagieren und bietet eine ansprechende visuelle Erfahrung. Der sanfte Übergangseffekt verleiht dem Button eine elegante Dynamik.

Button designen

.btn {
  /* Entfernen des Rahmens (Border) des Buttons */
  border: none;

  /* Hintergrundgradient für verschiedene Browser mit WebKit-Gradient-Fallback */
  background: -webkit-gradient(
    linear,
    right top,
    left top,
    from(#009fe3),
    color-stop(#005e87),
    color-stop(rgba(112, 112, 112, 0)),
    to(rgba(112, 112, 112, 0))
  );

  /* Standardlinearer Gradient */
  background: linear-gradient(
    270deg,
    #009fe3,
    #005e87,
    rgba(112, 112, 112, 0),
    rgba(112, 112, 112, 0)
  );

  /* Anfangsposition des Hintergrundverlaufs und seine Größe für animierte Übergänge */
  background-position: 99% 50%;
  background-size: 300% 300%;

  /* Abgerundete Ecken des Buttons */
  border-radius: 0.25rem;

  /* Zeiger-Cursor, um anzuzeigen, dass der Button anklickbar ist */
  cursor: pointer;

  /* Inline-Block, um Breiten- und Höhenanpassungen zu ermöglichen */
  display: inline-block;

  /* Schriftart, Schriftgröße und Schriftgewicht des Buttons */
  font-family: lato, arial, helvetica, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;

  /* Innenabstand für den Button, um Platz zu schaffen */
  padding: 1rem 2rem;

  /* Textfarbe auf Weiß setzen */
  color: white;

  /* Übergangseffekt für sanfte Animationen, einschließlich Easing und Transformationen */
  transition: 0.35s ease-out, transform 0.35s;
}

Zusammenfassung:

Border und Hintergrund: Der Button hat keinen Rahmen (border: none;) und einen Hintergrund mit einem Farbverlauf.
Abgerundete Ecken und Cursor: Der Button hat abgerundete Ecken (border-radius) und einen Zeiger-Cursor (cursor: pointer;).
Schriftstil und Farbe: Der Text innerhalb des Buttons hat eine bestimmte Schriftart, Schriftgröße, Schriftgewicht und Textfarbe.
Animation und Übergänge: Es gibt einen Übergangseffekt für sanfte Animationen, einschließlich Easing und Transformationen.

Einfacher HTML-Code

Hier ist ein einfacher HTML-Code, um den Button zu verwenden:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ihr Titel hier</title>
  <link rel="stylesheet" href="assets/styles.css"> <!-- Verweisen Sie auf Ihre CSS-Datei -->
</head>
<body>

  <button class="btn">Klick mich!</button>

</body>
</html>

Hover-Zustand des Buttons

Der hinzugefügte CSS-Code definiert die Stile für den Hover-Zustand des Buttons (wenn der Mauszeiger darüber schwebt). Hier ist eine Erklärung des zusätzlichen Codes:

.btn:hover {
  /* Hintergrundfarbe ändern, wenn Mauszeiger über dem Button schwebt */
  background-color: #32befa;

  /* Ändern der Hintergrundposition für den Hover-Zustand */
  background-position: 50% 99%;

  /* Hinzufügen von Schatten für einen visuellen Effekt bei Hover */
  -webkit-box-shadow: 0 0.3125rem 0.875rem 0 rgba(0, 0, 0, 0.17);
  box-shadow: 0 0.3125rem 0.875rem 0 rgba(0, 0, 0, 0.17);
}

background-color: #32befa;: Ändert die Hintergrundfarbe des Buttons auf #32befa (ein hellblauer Farbton), wenn der Mauszeiger darüber schwebt.
background-position: 50% 99%;: Ändert die Hintergrundposition, wenn der Mauszeiger über den Button schwebt. Dies könnte einen visuellen Effekt erzeugen, indem der Farbverlauf anders positioniert wird.
-webkit-box-shadow und box-shadow: Fügt dem Button einen Schatten hinzu, wenn der Mauszeiger darüber schwebt. Dieser Schatten hat eine horizontale Verschiebung von 0, eine vertikale Verschiebung von 0.3125rem, eine Weichheit von 0.875rem und eine Transparenz von 0.17. Dies erzeugt einen subtilen 3D-Effekt und eine visuelle Reaktion auf das Hovern.

Meld dich an und schreibe ein Kommentar