WebSite X5Help Center

 
Karl B.
Karl B.
User

Hover Button im Textobjekt  de

Auteur : Karl B.
Visité 1665, Followers 2, Partagé 0  

Hallo,

gibt es irgendeine Möglichkeit den Hoverbutton im Textobjekt einzufügen?

Posté le
25 RéPONSES
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Ja, wenn man individuellen Code einfügt.

LINK

Lire plus
Posté le de Andreas S.
Karl B.
Karl B.
User
Auteur

Ich habe den Code nach der bebilderten Anleitung unverändert eingefügt, der Button wird in der Vorschau jedoch nicht angezeigt. Funktioniert das nur auf dem Server?

Lire plus
Posté le de Karl B.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Nein muss auch in der Vorschau funktionieren. Kommt darauf an wie du es gemacht hast und wo du es eingefügt hast. Alles im HTML-Objekt?

Lire plus
Posté le de Andreas S.
Karl B.
Karl B.
User
Auteur

Ja alles im HTML-Objekt unter "HTML-Caode" und "Erweitert-CSS-Code". Ich habe ein neues leeres Projekt angelegt und nur auf der Startseite das HTML-Objekt eingefügt. Muss ich irgendwelche Parameter verändern/anpassen, damit er Button angezeigt wird?

Lire plus
Posté le de Karl B.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Anweisungen und Code vom 4. Post hast du genommen?

Lire plus
Posté le de Andreas S.
Karl B.
Karl B.
User
Auteur

Ich habe als HTML-Code 

<a class="btnCUSTOM" href="kontakt.html" target="_self">
<p2>KONTAKT</p2>
</a>

und als CSS-Coder

.btnCUSTOM {cursor: pointer; line-height: 4.5em; text-align: center; background: transparent; border: 2pxsolid#fff; color: #fff; padding: 15px30px; font-family:"Montserrat", sans-serif; font-size: 18px; font-weight: bold; text-decoration:none; transition: all0.4s ease-in;}

.btnCUSTOM:hover {color:#000; background: #fff; border-color: transparent;}

eingefügt.

Man könnte doch auch den Code vom Hoverbutton in ein HTML-Objekt einfügen? Ich weiß aber nicht wo.

 

Lire plus
Posté le de Karl B.
Karl B.
Karl B.
User
Auteur

Oh man, ich habe nicht bemerkt, dass im CSS-Code background transparent ist und als Seitenhindergundfarbe weiß voreingestellt ist. Nach Änderung auf blau, grün, gelb............ funktioniert das Teil einwandfrei. 

Vielen Dank dafür und für deine Hilfe! 

Lire plus
Posté le de Karl B.
Karl B.
Karl B.
User
Auteur

Sorry, vor lauter Gücksgefühl hätte ich beinahe meine eigentliche Frage vergesseen. Wie kann ich diesen Button in eine Textobjekt einfügen?

Lire plus
Posté le de Karl B.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Dazu musst du den CSS Code unter "1" Seo&Code Reiter "Erweitert" vor dem </head> Tag in die Klammern <style>..</style>  eintragen und den HTML-Code in das Text-Objekt kopieren! Dazu musst du noch im Text-Objekt oben den Button "HTML Code aktivieren" drücken!

Lire plus
Posté le de Andreas S.
Karl B.
Karl B.
User
Auteur

Weder in der Vorschau, noch im Browser wird der Button angezeigt. Als Hintergrundfarbe für das Textobjekt ist blau eingestellt.

CSS-Code?

<style>.btnCUSTOM {cursor: pointer; line-height: 4.5em; text-align: center; background: transparent; border: 2pxsolid#fff; color: #fff; padding: 15px30px; font-family:"Montserrat", sans-serif; font-size: 18px; font-weight: bold; text-decoration:none; transition: all0.4s ease-in;}<style>

<style>.btnCUSTOM:hover {color:#000; background: #fff; border-color: transparent;}<style>

Lire plus
Posté le de Karl B.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

So ist es falsch !

Richtig:

<style>

.btnCUSTOM {

cursor: pointer;

line-height: 4.5em;

text-align: center;

background: transparent;

border: 2pxsolid#fff; color: #fff;

padding: 15px30px;

font-family:"Montserrat", sans-serif;

font-size: 18px;

font-weight: bold;

text-decoration:none;

transition: all0.4s ease-in;

}

.btnCUSTOM:hover {

color:#000;

background: #fff;

border-color: transparent;

}

</style>

Lire plus
Posté le de Andreas S.
Karl B.
Karl B.
User
Auteur

Das funktioniert, aber der weiße Rahmen fehlt.

Lire plus
Posté le de Karl B.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

HAbe ich übersehen !

Die Zeile rauslöschen  border: 2pxsolid#fff; color: #fff;  und ersetzen mit...

border: 2px solid #fff;

color: #fff;

Lire plus
Posté le de Andreas S.
Karl B.
Karl B.
User
Auteur

Über den Button ist jetzt eine weißer vertikaler Strich.

Lire plus
Posté le de Karl B.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Kein Ahnung was du falsch gemacht hast.

Lire plus
Posté le de Andreas S.
Karl B.
Karl B.
User
Auteur

siehe Anhang!

Lire plus
Posté le de Karl B.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Ich habe gerade bemerkt, dass es irgendetwas in der Codeerkennung im Text-Objekt hat. Ich muss das erst genauer testen. Ich glaube es kommt bald ein neues Update raus was vielleicht diese Eigenart beheben wird.

Lire plus
Posté le de Andreas S.
Karl B.
Karl B.
User
Auteur

Alles klar, wäre toll, wenn du dich wieder meldest. Danke!

Lire plus
Posté le de Karl B.
Karl B.
Karl B.
User
Auteur

@Andreas

Hattest du schon Zeit das noch einmal zu testen?

Lire plus
Posté le de Karl B.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Ich habe jetzt den HTML-Code normal per Hand in das TExt-Objekt eingegeben und nicht kopiert und dann hat es normal funktioniert. Also den <a>.....

Lire plus
Posté le de Andreas S.
Karl B.
Karl B.
User
Auteur

Das habe ich auch gemacht und dann sieht es trotzdem wie im Anhang aus.

Lire plus
Posté le de Karl B.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Nochmal den Code den ich eingefügt habe ...

<style>
.btnCUSTOM {
    cursor: pointer;
    line-height: 4.5em;
    text-align: center;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 15px 30px;
    font-family:"Montserrat", sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-decoration:none;
    transition: all 0.4s ease-in;
    
}
.btnCUSTOM:hover {
    color:#000;
    background: #fff;
    border-color: transparent;
    
}
</style>

Lire plus
Posté le de Andreas S.
Karl B.
Karl B.
User
Auteur

Siehe Anhang.

Lire plus
Posté le de Karl B.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Das kommt von dem copy/past beim HTML Code!  Da wird immer etwas im Hintergrund mitkompiert das diesen Fehler auslöst.

Ich habe das Text-Objekt komplett gelöscht und den HTML-Code händisch eingefügt und dann hat es funktioniert.

Hatte aber den gleichen Fehler und glaubte es hat mit dem Text-Objekt etwas zu tun oder mit dem Code selbst. Aber dem war nicht so.

Lire plus
Posté le de Andreas S.
Karl B.
Karl B.
User
Auteur

Ich gebe auf, bei mir erscheint auch dann das Rechteck oberhalb des Buttons. Trotzdem vielen Dank für deine Mühe.

Lire plus
Posté le de Karl B.