Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Inspiration: Morphende Buttons für schicke Crossfade-Effekte

    Inspiration: Morphende Buttons für schicke Crossfade-Effekte

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

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.

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

Finde einen Job, den du liebst zum Thema JavaScript, Java

4 Reaktionen
Mi
Mi

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
Voxs
Voxs

@feqwefw: Ghostbuttons everywhere! yeah

Antworten
feqwefw
feqwefw

Ohne Ghostbuttons ziemlich blöd.

Antworten
Vladimir L
Vladimir L

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

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen