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

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
Psychologie im Design: Diese 5 Tipps helfen dir bei besserem Interaction-Design
Psychologie im Design: Diese 5 Tipps helfen dir bei besserem Interaction-Design

Mit jedem Tag wird es wichtiger, dass du dich durch deine Designs mehr mit deinen Nutzern verbindest und ein „menschliches Element“ integrierst. Das Website- und User-Experience-Design-Erlebnis … » weiterlesen

Particle Love: Fantastisches Design-Experiment mit Web-Standards
Particle Love: Fantastisches Design-Experiment mit Web-Standards

Für das 3D Webfest kreierte Entwickler Edan Kwan eine Sammlung opulenter 3D-Experimente auf der Basis moderner Webstandards. Solche Effekte hätte man außerhalb von Flash früher nicht für … » weiterlesen

Sketch: Beliebtes Design-Tool krempelt sein Lizenzmodell um
Sketch: Beliebtes Design-Tool krempelt sein Lizenzmodell um

Sketch-Updates soll es zukünftig nur noch in Form eines Abomodells geben. Wir verraten euch, was diese Änderung für euch bedeutet. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?