t3n News Design

Inspiration: Morphende Buttons für schicke Crossfade-Effekte

Inspiration: Morphende Buttons für schicke Crossfade-Effekte

Einblenden ist out – „morphen“ ist in. Zumindest macht der Design-Ansatz für morphende Buttons, die zu Dialogen werden, einiges her. Wir verraten euch, wie der Effekt funktioniert.

Inspiration: Morphende Buttons für schicke Crossfade-Effekte

Morphende Buttons erzielen schicke Effekte für deine Webseite. (Screenshot: Tympanus.net)

Dass Buttons Dialoge auslösen können, ist sicher nicht neu, doch das Ganze kann optisch noch um Einiges verfeinert werden. Mary Lou von Tympanus.net hat ein interessantes Konzept aufgegriffen, bei dem Call-To-Action-Elemente zu den eigentlichen Dialogen „gemorpht“ werden können.

Grob gesprochen wird das Call-To-Action-Element optisch wiederverwendet, um einen anderen Inhalt der Seite offenzulegen.

So funktionieren morphende Buttons

Willst du den Button beispielsweise zu einem Overlay morphen, platzierst du ihn und einen Container für den später darzustellenden Content in einem gemeinsamen Wrapper. Während der Wrapper und der Button beim Seitenaufruf sichtbar sind, wird der Container mit dem später darzustellenden Inhalt ausgeblendet.

Der „Content-Container“ ist dabei fix über dem Button positioniert und hat zunächst die gleichen Ausmaße und das gleiche Styling wie der Button selbst, liegt jedoch mit Hilfe der z-index-Property unterhalb des Buttons. Beim Klick auf den Button, wird ein Cross-Fade zwischen den beiden Elementen ausgelöst. Im Anschluss daran wird der Content-Container zu seiner endgültigen Form transformiert und der dazugehörige Inhalt eingeblendet. Durch diesen Trick sieht es so aus, als ob der Button aus seiner Position herausgerissen und verändert wird.

Morphende Buttons Beispiel
Durch einen technischen Trick wirkt es so, als ob der Button aus seiner Position herausgerissen und transformiert wird. (Quelle: Tympanus.net)

Diese Technik lässt sich ausweiten, um verschiedene optische Spielereien beim Klick auf Call-To-Action-Elemente zu erzielen. Die so entstehenden Effekte sind sehr schön anzusehen, aber mit vergleichsweise hohem Aufwand verbunden. Auch funktionieren die optischen Leckerbissen nur in modernen Browsern. Je nach Zielgruppe und Einsatzzweck kann man die Morph-Effekte aber durchaus (mit entsprechenden Fallbacks) für kleinere Projekte oder Landing-Pages ausprobieren.

Eine Übersicht mit verschiedenen Effekten der Morph-Technik findest du auf der Demo-Seite für „Morphende Buttons“ auf Tympanus.net. Den dazugehörigen Source-Code kannst du dir auf GitHub runterladen.

via tympanus.net

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
4 Antworten
  1. von Vladimir L am 11.08.2014 (16:41 Uhr)

    Dass es mal wieder eine tympanus demo von der unglaublichen MARY LOU ist — hatte ich kein zweifel ^^

    Antworten Teilen
  2. von feqwefw am 11.08.2014 (22:00 Uhr)

    Ohne Ghostbuttons ziemlich blöd.

    Antworten Teilen
  3. von Voxs am 12.08.2014 (10:04 Uhr)

    @feqwefw: Ghostbuttons everywhere! yeah

    Antworten Teilen
  4. von Mi am 17.08.2014 (11:29 Uhr)

    Hallo,

    ich finde, bei den Buttons sind wirklich einige ganz interessante Dinge dabei. Leider bin ich noch nicht so fit in Sachen "Code". Gibt es eine kurze Anleitung/Erklärung dazu, wie man einzelne Dinge daraus in seine Website einbauen möchte?
    Insbesondere würde mich z.B. "Terms" oder "Info Overlay" interessieren. Wenn man da jemand weiterhelfen könnte oder einen passenden Link zu einer Beschreibung geben könnte wäre das wirklich super :)

    Herzlichen Dank für eure Hilfe!

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Design
Ist responsives Design besser für SEO?
Ist responsives Design besser für SEO?

Es gibt Aussagen, die verselbstständigen sich so schnell, dass sie bald nicht mehr hinterfragt werden. „Responsives Design ist besser für SEO“ ist eine davon. Wir schauen genauer hin. » weiterlesen

Responsiveres Design mit Element Queries
Responsiveres Design mit Element Queries

Sicherlich lassen sich mit CSS Media Queries Designelemente an die Breite oder Höhe des Viewports, also des Browserfensters oder der Bildschirmdimensionen mobiler Geräte, anpassen. » weiterlesen

Canva: Ein Design-Tool, mit dem jeder zum Designer werden soll
Canva: Ein Design-Tool, mit dem jeder zum Designer werden soll

Mit Canva soll das Gestalten verschiedenster Grafiken kein Problem mehr sein. In nur 23 Sekunden soll jeder zum Designer werden. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?