Slide In Button im Oxygen Builder erstellen

In diesem Beitrag erfährst du, wie du ganz leicht einen Slide In Button im Oxygen Builder erstellen kannst. Ein Slide in Button fährt in das Bild rein, sobald du mit der Maus über diesen fährst. Dies ist eine schöne Möglichkeit, deinen Kunden schöne Buttons zur Verfügung zu stellen. Beispielsweise für die Kontaktaufnahme.

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

Als erstes erstellst du einen Div-Container. In diesem Container werden unsere gewünschten Elemente eingefügt. Dieser Div-Container muss nicht in einer Section platziert werden.

Als nächstes gibst du dem Div eine Breite von 140 Pixeln. Achte auch darauf, dass das Layout des Divs auf "Horizontal" und das Vertical Item Alignment auf "Middle" gestellt ist. Ansonsten werden die Elemente, welche sich in dem Div befinden untereinander angezeigt.

Klicke dann mit ausgewähltem Div auf den Reiter "Advanced" und scrolle bis zum Ende.

Unter "Position" klickst du auf fixed. Außerdem gibst du oben 200px und rechts -86px ein.

Achte auch darauf, dass du bei Bedarf den z-index anpasst. Das Div muss sich über allen anderen Elementen bewegen. Ist der z-index zu niedrig, kann es passieren, dass Elemente mit einem höheren z-index das Div überlagern.

Klicke dann oben auf den Zustand ":hover" und gehe wieder in den Reiter "Advanced".
Dort vergibst du wieder den gleichen z-index und gibst oben 200px und rechts 0px ein.

Nun funktioniert der Slide In Button schon, allerdings reagiert er noch ziemlich steif.

Hierfür nutzen wir ein wenig CSS.

Klick wieder auf den Reiter Advanced, nachdem du in den "state"-Zustand gewechselt hast.

Dort gibst du unter "Custom CSS" folgendes ein:

transition-timing-function: ease-in-out;
transition: 0.5s;

Dein Button ist fertig und du siehst, dass er nun smooth ins Bild gescrollt wird, sobald du mit der Maus über den Button fährst.