Hover Button im Textobjekt
Autor: Karl B.
Visited 1667,
Followers 2,
Udostępniony 0
Hallo,
gibt es irgendeine Möglichkeit den Hoverbutton im Textobjekt einzufügen?
Posted on the
Ja, wenn man individuellen Code einfügt.
LINK
Autor
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?
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?
Autor
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?
Anweisungen und Code vom 4. Post hast du genommen?
Autor
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.
Autor
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!
Autor
Sorry, vor lauter Gücksgefühl hätte ich beinahe meine eigentliche Frage vergesseen. Wie kann ich diesen Button in eine Textobjekt einfügen?
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!
Autor
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>
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>
Autor
Das funktioniert, aber der weiße Rahmen fehlt.
HAbe ich übersehen !
Die Zeile rauslöschen border: 2pxsolid#fff; color: #fff; und ersetzen mit...
border: 2px solid #fff;
color: #fff;
Autor
Über den Button ist jetzt eine weißer vertikaler Strich.
Kein Ahnung was du falsch gemacht hast.
Autor
siehe Anhang!
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.
Autor
Alles klar, wäre toll, wenn du dich wieder meldest. Danke!
Autor
@Andreas
Hattest du schon Zeit das noch einmal zu testen?
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>.....
Autor
Das habe ich auch gemacht und dann sieht es trotzdem wie im Anhang aus.
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>
Autor
Siehe Anhang.
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.
Autor
Ich gebe auf, bei mir erscheint auch dann das Rechteck oberhalb des Buttons. Trotzdem vielen Dank für deine Mühe.