Slide In Button im Oxygen Builder erstellen

Erstellt: 18. Dezember 2022
Letzte Bearbeitung: 7. Januar 2023
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.

YouTube

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

Video laden

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.

Dir gefällt unser Beitrag? Dann teile ihn gerne!

Julian A. Benz

Content-Produzent, TYPO3 & WordPress Fan und Technikenthusiast.

Julian liebt alle Themen rund um Technik und begeistert sich für grandiose Produkte, sowohl online, als auch offline. Auf BenzMedia Learning schreibt er über die besten Tools für deine Webseite, Adobe Anwendungen, SEO und die besten Produkte.

Du kannst Ihn über Xing, LinkedIn und Facebook erreichen.

Werbehinweis

Wir nutzen auf unserer Seite sogenannte Affiliate-Links. Diese sind mit einem Stern (*) gekennzeichnet.
Wenn du über einen dieser Links ein Produkt oder ein Tool kaufst, erhalten wir dafür eine Provision, ohne dass der Kaufpreis für dich teurer wird.
Dadurch kannst du uns dabei unterstützen, dir weiterhin hilfreiche Tutorials zur Verfügung zu stellen und unser Projekt am Laufen zu halten.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Unternehmen

© 2008-2023 | Alle Rechte vorbehalten | Made with ❤️ by BenzMedia
rocketcross