Oxygen Builder: Slide In Button erstellen

In diesem Beitrag erfahren Sie, wie Sie mit dem Oxygen Builder einen Slide-in-Button erstellen.

Ein Slide-in-Button fährt ins Bild, sobald Sie mit der Maus darüberfahren (hovern). So geben Sie Ihren Kunden eine schnelle Möglichkeit, mit Ihnen Kontakt aufzunehmen.

Video auf YouTube ansehenSlide In Button erstellen im Oxygen Builder

Slide-In-Button in Oxygen Builder entwickeln

Als Erstes erstellen Sie einen Div-Container.
In diesen Container werden unsere gewünschten Elemente eingefügt.
Dieser Div-Container muss nicht in einer Section platziert werden.

Als Nächstes geben Sie dem Div eine Breite von 140 Pixeln.
Achten Sie auch darauf, dass das Layout des Divs auf “Horizontal” und das Vertical Item Alignment auf “Middle” steht.
Ansonsten werden die Elemente im Div untereinander angezeigt.

Klicken Sie dann mit ausgewähltem Div auf den Reiter “Advanced” und scrollen Sie bis zum Ende.

Unter “Position” klicken Sie auf fixed. Außerdem geben Sie oben 200px und rechts -86px ein.

Achten Sie auch darauf, bei Bedarf den z-index anzupassen. Das Div muss sich über allen anderen Elementen bewegen. Ist der z-index zu niedrig, können Elemente mit einem höheren z-index das Div überlagern.

Klicken Sie dann oben auf den Zustand “:hover” und gehen Sie wieder in den Reiter “Advanced”.
Dort vergeben Sie wieder den gleichen z-index und geben 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.

Klicken Sie wieder auf den Reiter Advanced, nachdem Sie in den “state”-Zustand gewechselt haben.

Dort geben Sie unter “Custom CSS” Folgendes ein:

CSS für den Slide In Button

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

Ihr Button ist fertig, und Sie sehen, dass er nun sanft ins Bild gleitet, sobald Sie mit der Maus über den Button fahren.

Fazit

Mit einem Slide-in-Button geben Sie Ihren Interessenten die Möglichkeit, schnell mit Ihnen in Kontakt zu treten.
Dieser Slide-in-Button ist ein kleiner Button, der vom Seitenrand herausfährt, sobald man mit der Maus darüberfährt.

Bitte beachten Sie, dass diese Funktion auf mobilen Geräten keinen Nutzen bringt, da man auf Handys nicht hovern, sondern nur tippen kann.

Daher empfehlen wir Ihnen, den Button auf mobilen Geräten auszublenden oder eine andere Möglichkeit anzubieten.