Morphende Buttons für schicke Crossfade-Effekte

Der neueste Trend im Webdesign sind die „morphenden“ Buttons. Nach dem Ausblenden-Trend wollen sie jetzt die Web-Welt erobern. Vom Aussehen her gesehen sind die Buttons zumindestens Top. Deshalb zeige ich euch, wie der Effekt gut funktioniert und wann ihr ihn einsetzt solltet. Eigentlich konnten Buttons ja schon immer Dialoge auslösen, allerdings kann dieser Schritt durch die morphenden Buttons wesentlich verschönert werden. Ein sehr schönes Konzept hat Mary Lou von Tympanus.net bei dem sich die Buttons zu den eigentlich Dialogen verwandelt werden. Hierbei wird durchgängig das gleiche Design für den Button und den Dialog genutzt, sodass immer eine Verbindung besteht. Eine ähnlicher Effekt soll auch in Android L dargeboten werden, was die Beliebtheit des „morphen“ wiederspiegelt.

Wie funktionieren morphende Buttons?

Das Grundprinzip der Buttons ist simpel und genial. Du brauchst nur einen Button und einen Content, der bei einem Klick dargestellt werden soll. Dazu platzierst du den Content mit z-index unter dem Button und gibst im die gleiche Größe wie dem Button. Wenn der Button nun angeklickt wird, gibst du dem Content einen sehr hohen z-index und vergrößerst ihn auf die richtigen Maße. So entsteht der Effekt, dass der Content aus dem Button herauspringt.

Fertige Effekte kannst du dir auf der Demoseite von Mary Lou angucken.

Schreibe einen Kommentar