Buttons mit Hyperlink versehen?

[clemy49]

Hallo liebe Leute,

ich bin noch Neuling in Contao und versuche gerade einen Button zu erstellen.

Ich habe unter Contao unter Themes einfach ein neues Stylesheet angelegt.

Also einen Button mit eigenem CSS Code.

//*background: #5eb752; /* Old browsers */
background: -moz-linear-gradient(top, #5eb752 0%, #7ae41a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5eb752), color-stop(100%,#7ae41a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5eb752 0%,#7ae41a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5eb752 0%,#7ae41a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5eb752 0%,#7ae41a 100%); /* IE10+ */
background: linear-gradient(to bottom, #5eb752 0%,#7ae41a 100%); /* W3C */
filter: progidXImageTransform.Microsoft.gradie… startColorstr='#5eb752', endColorstr='#7ae41a',GradientType=0 ); /* IE6-9 */
*/

moz-border-radius: 20px;
webkit-border-radius: 20px;
khtml-border-radius: 20px;
border-radius: 20px;

Einen Text habe ich über ARTIKEL mit dem Button verknüpft.

Dieser sieht so aus als HTML Code:

//*<div><span style="font-size: 40px; color: #ffffff;"><strong>Hallo</strong></span><…
<div><span style="font-size: 20px; color: #ffffff;">Hallo</span></div>
<div><span style="color: #ffffff; font-size: 9px;">[nbsp]</span></div>
<div><span style="color: #ffffff; font-size: 17px;">Leute</span></div>*/

Was ist nun die elegante Variante? Entweder den Link in den Text HTML Code mit einfügen oder geht das auch über die CSS Programmierung?
Am Ende soll der ganze Button klickbar sein und nicht nur der Text da drinne.
Wie würde der Code dann dafür aussehen? Ich komme nach studenlangen googeln einfach nicht weiter.

Danke euch schon jetzt

[armin41]

Hallo clemy49,

wenn ich dich richtig verstanden habe, dann löst du das so:

.knopf (die css-Klasse), die hast du nicht angegeben.

Im html:

<a href="Link zu ..." class="knopf">Klicken Sie auf den Knopf</a>

Damit hast du nicht nur den Text, sondern den ganzen Button als Hyperlink und nicht nur den Text.

Alternativ: <a href="Link zu ..."><p class="knopf">Klicken Sie auf den Knopf</p></a>

[clemy49]

Hallo armin41,

danke für deine Hilfe, das funktioniert soweit. Dann ist der Link mit dem Text in dem Button und der eigentliche Text wird aber verdrängt. Wie kann ich die vorgegebenen Styles, wie Schriftart und Farbe nun mit in den Code einbinden? So dass die Wörter HALLO LIEBE LEUTE (anstatt Klicken Sie auf den Knopf) in der jetzt vorgegeben Schriftart übernommen werden?


<p><a class="" href="www.google.de">Klicken Sie auf den Knopf</a></p>
<div><span style="font-size: 40px; color: #ffffff;"><strong>Hallo</strong></span></div>
<div><span style="font-size: 20px; color: #ffffff;">liebe</span></div>
<div><span style="color: #ffffff; font-size: 9px;">[nbsp]</span></div>
<div><span style="color: #ffffff; font-size: 17px;">Leute</span></div>

[armin41]

Hallo clemy49,

wie denn nun? Ich dachte, der Artikel wäre das Hallo liebe Leute. Der Button soll das Hallo liebe Leute anzeigen?

Dann so:

<p><a class="" href="www.google.de">
<span style="font-size: 40px; color: #ffffff;"><strong>Hallo</strong></span>
<span style="font-size: 20px; color: #ffffff;">liebe</span>
<span style="color: #ffffff; font-size: 9px;">[nbsp]</span>
<span style="color: #ffffff; font-size: 17px;">Leute</span></a></p>

wobei schön ist das nicht, aber es erfüllt erstmal seinen Zweck!
Gruß
Armin

[armin41]

so nachträglich: da du schon die Klasse .knopf hast, kannst du deine Farbe #ffffff in die Klasse .knopf stecken, dann sparst du dir schon mal die Angaben in <span>.

<p><a class="" href="www.google.de">
<span style="font-size: 40px;><strong>Hallo </strong></span>
<span style="font-size: 20px;>liebe </span>
<span style="font-size: 17px;">Leute</span></a></p>