Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 26. Februar 2015

Transformicons: Animierte CSS-Buttons für HTML5-Websites

Kein Beitragsbild

Vor HTML5 und CSS3 waren vor allem animierte GIF-Bilder ein beliebtes Mittel, um eine Website in Bewegung zu bringen. Dank der Animationsmöglichkeiten von CSS3 und SVG können solche bewegten Bilder heutzutage deutlich eleganter und zudem vektorbasiert und interaktiv realisiert werden. Das Projekt Transformicons stellt eine Reihe klassischer Buttons für Navigationen zur Verfügung, die mit kleinen aber feinen Animationen auf sich aufmerksam machen.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

transformicons-teaser

Anzeige

Buttons zusammenstellen und einbinden

Die Transformicons stammen aus der digitalen Feder des New Yorker Freelancers Dennis Gaebel. Sie bestehen aus fünf verschiedenen Buttons, die man häufig in Navigationen und Menüs findet. Für manche Button stehen mehrere Varianten zur Verfügung. So gibt es den klassischen Menü-Button, besser als Hamburger-Menü bekannt. Dieser besteht aus drei horizontal untereinander angeordneten Linien und öffnet vor allem im mobilen Weblayoust häufig die Navigation. Diesen gibt es in sechs Ausführungen. So verwandelt sich der Menü-Button je nach Variante in ein Kreuz, einen Pfeil oder ein Minus-Zeichen.

Darüber hinaus gibt es zwei Gitter-Buttons, die sich in unterschiedlich große Plus-Zeichen verwandeln, sowie zwei Plus-Buttons, die sich in einen Haken beziehungsweise ein Minus-Zeichen transformieren. Dann gibt es noch einen Briefumschlag, der sich öffnet und schließt sowie den klassischen Laden-Button, bestehend aus einem Kreis mit animiertem Verlauf.

transformicons_icons
Die Transformicons

Über einen Builder kann man sich alle Buttons und Icons, die man verwenden möchte, zusammenstellen. Anschließend werden HTML-, CSS- und JavaScript-Quelltext ausgegeben. Dabei kann der CSS-Quelltext wahlweise als reines CSS oder als SASS wiedergegeben werden.

Kopiert man man den Quelltext in ein HTML-Dokument, kann man die Icons einsetzen. Jeder Button wird als „<button>“-Element mit der Klasse „tcon“ sowie einer weitere Klasse, welche die Art des Buttons bestimmt, ausgezeichnet. Außerdem enthält jedes „<button>“-Element noch zwei „<span>“-Elemente – eines für die Darstellung des Icons und eines für etwaigen Alternativtext.

<button type="button" class="tcon tcon-menu--xbutterfly" aria-label="Menü aufklappen">
  <span class="tcon-menu__lines" aria-hidden="true"></span>
  <span class="tcon-visuallyhidden">Menü aufklappen</span>
</button>

Steuerung per JavaScript

Während Aussehen und Animation der Buttons per CSS gelöst ist, erfolgt die Steuerung der Animationen per JavaScript. Um per Klick auf einen Button die Animation auszulösen, muss mindestens ein JavaScript-Aufruf erfolgen.

transformicons.add(".tcon");

Das Beispiel sorgt dafür, dass alle HTML-Elemente mit dem Klassennamen „tcon“ per Mausklick animiert werden. Das Verhalten der Buttons kann auch verändert werden. Mit den Methoden „transform()“ und „revert()“ kann beispielsweise eingestellt werden, wie die Transformation der Icons stattfinden soll.

transformicons.add(".tcon", {
  transform: "mouseover",
  revert: "mouseout"
});

Im Beispiel wird statt per Mausklick per Hovereffekt die Animation sowie die rückläufige Animation ausgeführt.

Barrierefreiheit dank ARIA

Damit die Transformicons auch auf Screenreadern wahrgenommen werden können, sind die „<button>“-Elemente mit entsprechenden ARIA-Eigenschaften ausgestattet. So wissen auch Menschen mit Sehbehinderung, was sich hinter den Button verbirgt – insofern die ARIA-Eigenschaften berücksichtigt und sinnvoll eingesetzt werden.

Fazit

Die Buttons der Transformicons sind nicht neu und man findet sie mittlerweile auf zahlreichen Websites. Sie haben sich als Quasi-Standard etabliert. Hier hat man jedoch die Möglichkeit, solche Buttons schnell und einfach in ein eigenes Projekt zu integrieren.

Die Transformicons laufen unter allen aktuellen Browsern, einschließlich des Internet Explorers ab Version 10. Die Verwendung ist zu kommerziellen und persönlichen Zwecken frei, da das Projekt unter der liberalen MIT-LIzenz steht. Der Download erfolgt via Github.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.