Pulsierender Call-to-Action Button mit CSS3 und WebKit-Animation

Startseite › Apple, CSS / 1. Mai 2010

Pulsierender Call-to-Action Button mit CSS3 und WebKit-Animation

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”.

[Der Autor] Sergej Müller ist enthusiastischer Software Engineer mit Schwerpunkten Webentwicklung und WordPress. Seit 2007 programmiert und vertreibt er wpSEO, das weltberühmte und patentierte SEO-Plugin für WordPress-Blogs.

1 Kommentar zum Artikel

107 Tage zuvor | #1 TomX

hi sergej, sieht sehr gut aus. danke!!! wird natürlich gleich getestet. best tom

Suche

Startseite › Apple, CSS / 1. Mai 2010