CSS3 Archives - Michael Wagner

Dieser Artikel zeigt, wie ein Button mit animiertem Hintergrund bei :hover erstellt wird.

Das Ergebnis

Achtung: Da vom Internet-Explorer CSS-Animationen noch nicht unterstützt werden, zeit dieser das Ergebnis falsch an. Getestet ist der Button in den aktuellen Versionen von Mozilla Firefox und Google Chrome.

HTML

Der HTML-Code für unseren Button bleibt sehr einfach:

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title>Button Example</title>
   <link rel="stylesheet" href="style.css"/>
   <link href='http://fonts.googleapis.com/css?family=Noto+Sans:300' rel='stylesheet' type='text/css'>
</head>
<body>
<button>Button</button>
</body>
</html>

CSS

Zuerst wird das grundsätzliche Aussehen des Buttons festgelegt. Hierzu gehören die Farben, Schriftarten, Abstände und der Rahmen. Mit diesem Code wird der Button bereits korrekt angezeigt, nur die Animation fehlt noch.

button {
  font-family: 'Noto Sans', 'Arial';
  font-size: 1.2em;
  font-weight: 300;
  cursor: pointer;
  padding: 0.4em 1em;
  text-align: center;
  background-color: #fff;
  border: 0.2em solid #14a2d4;
  border-radius: 50px;
  color: #323232;
}

Anschließend werden die Zustände :focus und :hover definiert. In diesen Fällen soll die Animation abgespielt werden.Hier wird als Hintergrund ein farbiger Kreis mit der halben Länge des Buttons festgelegt. Dieser wird mit einem Verlauf erzeugt. Dafür, dass Kreis nicht unscharf wirkt, dient der abrupte Farbwechsel bei 50%. Mit animation-fill-mode wird festgelegt, dass der Endzustand der Animation nach deren Abschluss bestehen bleibt, der Hintergrund also nicht wieder weiß wird.

button:hover,
button:focus {
  background: radial-gradient(circle, #14a2d4 50%, #ffffff 50%);
  /* W3C */
  background-position: center;
  background-repeat: no-repeat;
  animation: btn 0.2s ease-out 1;
  animation-fill-mode: forwards;
}

Zuletzt wird die Animation definiert. In dieser wird einfach festgelegt, dass der Hintergrund von 0% Größe (also unsichtbar) auf 200% Größe anwächst.

@keyframes btn {
  0% {
    background-size: 0;
  }
  100% {
    background-size: 200%;
  }
}

Aus Kompatibilitätsgründen werden noch Varianten mit Prefix hinzugefügt.

button:hover,
button:focus {
  background: radial-gradient(circle, #14a2d4 50%, #ffffff 50%);
  /* W3C */
  background-position: center;
  background-repeat: no-repeat;
  animation: btn 0.2s ease-out 1;
  animation-fill-mode: forwards;
  -webkit-animation: btn 0.2s ease-out 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: btn 0.2s ease-out 1;
  -moz-animation-fill-mode: forwards;
}
@keyframes btn {
  0% {
    background-size: 0;
  }
  100% {
    background-size: 200%;
  }
}
@-webkit-keyframes btn {
  0% {
    background-size: 0;
  }
  100% {
    background-size: 200%;
  }
}
@-moz-keyframes btn {
  0% {
    background-size: 0;
  }
  100% {
    background-size: 200%;
  }
}

Der fertige Code

button {
  font-family: 'Noto Sans', 'Arial';
  font-size: 1.2em;
  font-weight: 300;
  cursor: pointer;
  padding: 0.4em 1em;
  text-align: center;
  background-color: #fff;
  border: 0.2em solid #14a2d4;
  border-radius: 50px;
  color: #323232;
}
button:hover,
button:focus {
  background: radial-gradient(circle, #14a2d4 50%, #ffffff 50%);
  /* W3C */
  background-position: center;
  background-repeat: no-repeat;
  animation: btn 0.2s ease-out 1;
  animation-fill-mode: forwards;
  -webkit-animation: btn 0.2s ease-out 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: btn 0.2s ease-out 1;
  -moz-animation-fill-mode: forwards;
}
@keyframes btn {
  0% {
    background-size: 0;
  }
  100% {
    background-size: 200%;
  }
}
@-webkit-keyframes btn {
  0% {
    background-size: 0;
  }
  100% {
    background-size: 200%;
  }
}
@-moz-keyframes btn {
  0% {
    background-size: 0;
  }
  100% {
    background-size: 200%;
  }
}

Hier gehts zum Ergebnis.