1. Mai 2010 / Apple, CSS
Pulsierender Call-to-Action Button mit CSS3 und WebKit-Animation
Mithilfe von CSS3 und speziellen WebKit-Eigenschaften lässt sich ein beeindruckender Glow-Effekt realisieren. Zum Beispiel um eine Schaltfläche herum.
Transmit 4 musste nicht lange überzeugen: Der Kaufentscheidung folgte die Bestellung, der Bestellung folgte eine Kaufbestätigung via E-Mail. Und genau diese E-Mail-Nachricht beinhaltete ein spannendes Fragment, welches die kreative Linie des beeindruckenden Gesamtkonzepts unterstreicht und dabei die effektvolle, technisch ausgereifte Umsetzung der Produktseite vervollständigt. Die Rede ist von ins E-Mail-Template eingebetteter Call-to-Action Schaltfläche, welche von dezent pulsierendem, Aufmerksamkeit erregendem Glow-Effekt umgeben ist.
Neuartige Realisierung für moderne Browser
Das Augenmerk fällt dabei auf CSS3 und die WebKit-Animation als verwendete Techniken – der Button kommt gänzlich ohne grafische Elemente und lästiges JavaScript aus. Das Verfahren richtet sich an die WebKit-Browser Google Chrome und Safari (Apple Mail gehört ebenfalls dazu) und wird ausschließlich dort fehlerfrei und vollständig interpretiert.
Videoaufnahme der aktiven Schaltfläche in Apple Mail
Quelltext: Schaltfläche mit pulsierendem Schatten für WebKit
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<style type="text/css">
a {
color: #444;
border: 1px solid rgb(100, 150, 255);
margin: 10%;
padding: 7px 15px;
display: inline-block;
background: #c4c4c4 -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(.05, #e6e6e6), to(#c4c4c4));
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,.9);
-webkit-border-radius: 20px;
-webkit-box-shadow: 0 0 4px #6998ff;
-webkit-animation-name: 'glow';
-webkit-animation-duration: .7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes 'glow' {
0% {
border-color: rgba(100, 150, 255, .5);
-webkit-box-shadow: 0 0 1px rgba(100, 150, 255, .3);
}
100% {
border-color: rgba(100, 150, 255, 1);
-webkit-box-shadow: 0 0 10px rgba(100, 150, 255, 1);
}
}
</style>
<title>WebKit Test</title>
</head>
<body>
<a href="http://panic.com/transmit/">
Transmit 4 von Panic
</a>
</body>
</html>
Bemerkung
Alternative Browser wie Firefox und die Internet Explorer-Familie zeigen den Button ebenso als klickbare Fläche an. Allerdings ohne “Spezialeffekte”.
Sergej Müller ist enthusiastischer Software Engineer mit Schwerpunkten Webentwicklung, Apps und WordPress. Seit 2007 programmiert und vertreibt er wpSEO, das zugkräftige SEO-Plugin für WordPress-Blogs.