WebSite X5Help Center

 
Karl B.
Karl B.
User

Hover Button im Textobjekt  de

Autore: Karl B.
Visite 1671, Followers 2, Condiviso 0  

Hallo,

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

Postato il
25 RISPOSTE
Andreas S.
Andreas S.
Moderator
Utente del mese DE

Ja, wenn man individuellen Code einfügt.

LINK

Leggi di più
Postato il da Andreas S.
Karl B.
Karl B.
User
Autore

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?

Leggi di più
Postato il da Karl B.
Andreas S.
Andreas S.
Moderator
Utente del mese 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?

Leggi di più
Postato il da Andreas S.
Karl B.
Karl B.
User
Autore

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?

Leggi di più
Postato il da Karl B.
Andreas S.
Andreas S.
Moderator
Utente del mese DE

Anweisungen und Code vom 4. Post hast du genommen?

Leggi di più
Postato il da Andreas S.
Karl B.
Karl B.
User
Autore

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.

 

Leggi di più
Postato il da Karl B.
Karl B.
Karl B.
User
Autore

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! 

Leggi di più
Postato il da Karl B.
Karl B.
Karl B.
User
Autore

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

Leggi di più
Postato il da Karl B.
Andreas S.
Andreas S.
Moderator
Utente del mese 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!

Leggi di più
Postato il da Andreas S.
Karl B.
Karl B.
User
Autore

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>

Leggi di più
Postato il da Karl B.
Andreas S.
Andreas S.
Moderator
Utente del mese 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>

Leggi di più
Postato il da Andreas S.
Karl B.
Karl B.
User
Autore

Das funktioniert, aber der weiße Rahmen fehlt.

Leggi di più
Postato il da Karl B.
Andreas S.
Andreas S.
Moderator
Utente del mese DE

HAbe ich übersehen !

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

border: 2px solid #fff;

color: #fff;

Leggi di più
Postato il da Andreas S.
Karl B.
Karl B.
User
Autore

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

Leggi di più
Postato il da Karl B.
Andreas S.
Andreas S.
Moderator
Utente del mese DE

Kein Ahnung was du falsch gemacht hast.

Leggi di più
Postato il da Andreas S.
Karl B.
Karl B.
User
Autore

siehe Anhang!

Leggi di più
Postato il da Karl B.
Andreas S.
Andreas S.
Moderator
Utente del mese 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.

Leggi di più
Postato il da Andreas S.
Karl B.
Karl B.
User
Autore

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

Leggi di più
Postato il da Karl B.
Karl B.
Karl B.
User
Autore

@Andreas

Hattest du schon Zeit das noch einmal zu testen?

Leggi di più
Postato il da Karl B.
Andreas S.
Andreas S.
Moderator
Utente del mese 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>.....

Leggi di più
Postato il da Andreas S.
Karl B.
Karl B.
User
Autore

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

Leggi di più
Postato il da Karl B.
Andreas S.
Andreas S.
Moderator
Utente del mese 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>

Leggi di più
Postato il da Andreas S.
Karl B.
Karl B.
User
Autore

Siehe Anhang.

Leggi di più
Postato il da Karl B.
Andreas S.
Andreas S.
Moderator
Utente del mese 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.

Leggi di più
Postato il da Andreas S.
Karl B.
Karl B.
User
Autore

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

Leggi di più
Postato il da Karl B.