2 Button in einer Zeile

[AchimB]

Hey Leute,

Ich habe auf meiner Seite einen Button mit folgendem Code

<style type="text/css">
/*<![CDATA[*/


.Button1 {
        background-color:#ffffff;
        border-radius:28px;
        border:1px solid #bf4141;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        font-family:PT Sans Narrow;
        font-size:20px;
        font-weight:bold;
        padding:8px 40px;
        text-decoration:underline;
        
}
.Button1:hover {
        background-color:#fad2d2
}
.Button1:active {
        position:relative;
        top:1px;
}</body></html>
/*]]>*/
</style><div align="center">
    <a href="https://www.google.com/" rel="nofollow" class="Button1">Google</a>
</div>

Nun möchte ich einen zweiten Button hinzufügen, der in der gleichen Zeile angezeigt wird. Leider weiß ich nicht, wie ich das umsetzen soll. Kann mir jemand helfen?

 

[MrMurphy]

Den Quelltext für den zweiten Button fügst du einfach hinter dem ersten ein. Zum Beispiel

      <div align="center">
         <a href="https://www.google.com/" rel="nofollow" class="Button1">Google</a>
         <a href="https://www.google.com/" rel="nofollow" class="Button2">Youtube</a>
      </div>

Wobei du noch die Fehler oder veralteten Angaben im Quelltext beseitigen solltest.

 

[AchimB]

Den Quelltext für den zweiten Button fügst du einfach hinter dem ersten ein. Zum Beispiel

      <div align="center">
         <a href="https://www.google.com/" rel="nofollow" class="Button1">Google</a>
         <a href="https://www.google.com/" rel="nofollow" class="Button2">Youtube</a>
      </div>

Wobei du noch die Fehler oder veralteten Angaben im Quelltext beseitigen solltest.

Hey vielen Dank für deine Antwort. Leider funktioniert es bei mir noch nicht.

<style type="text/css">
/*<![CDATA[*/


.Button1 {
        background-color:#ffffff;
        border-radius:28px;
        border:1px solid #bf4141;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        font-family:PT Sans Narrow;
        font-size:20px;
        font-weight:bold;
        padding:8px 40px;
        text-decoration:underline;
        
}
.Button1:hover {
        background-color:#fad2d2
}
.Button1:active {
        position:relative;
        top:1px;
}

.Button2 {
        background-color:#ffffff;
        border-radius:28px;
        border:1px solid #bf4141;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        font-family:PT Sans Narrow;
        font-size:20px;
        font-weight:bold;
        padding:8px 40px;
        text-decoration:underline;
        
}
.Button2:hover {
        background-color:#fad2d2
}
.Button2:active {
        position:relative;
        top:1px;
}
    
<div align="center">
<a href="https://www.google.com/" rel="nofollow" class="Button1">Google</a>
<a href="https://www.google.com/" rel="nofollow" class="Button2">Youtube</a>
</div>

Bei mir sieht der Code jetzt so aus. Kannst Du mir sagen, wo ich den Fehler gemacht habe? Und welche veralteten bzw. fehlerhaften Angaben hast Du gemeint?

LG

 

[MrMurphy]

Lösung mit deinem Quelltext:

Online-Lösung dazu: https://www.w3schools.com/code/tryit.asp?filename=GT422E2TKS3L

Auf den grünen Run-Button klicken.

Mit aktuellen HTML und CSS könnte eine Lösung so aussehen:

https://www.w3schools.com/code/tryit.asp?filename=GT42499NGHD4

Falls das bei dir nicht funktioniert liegt das wahrscheinlich an dem Teil des Quelltextes, den du uns nicht zeigst. Oder du hast das Problem nicht nachvollziehbar beschrieben.

 

[Failix]

@MrMurphy In Deinem optimierten Code ist immer noch die Klasse ".button a:active" aus dem Ursprungsposting. Kann sein, ich übersehe etwas, aber für mich macht sie keinen Sinn, oder?

 

[MrMurphy]

Nö. In dem Ursprungsposting (deinem) und meinem daraus online erstellten Quelltext gibt es die Klasse ".button a:active" nicht. Keine Ahnung wo du sie dort siehst.

Ob sie Sinn macht kannst du selbst ausprobieren. Du wolltest es doch so haben.

In dem Online-Beispiel kannst du in der linken Spalte den Quelltext ändern (also auch Teile löschen). Wenn du danach erneut auf den grünen Run-Button klickst siehst du die Auswirkungen. Kaputt machen kannst du dadurch nichts.

 

[Failix]

@MrMurphy Ich glaube, Du verwechselst mich. Ich hab' doch nur mitgelesen und eine Frage gestellt, ich bin nicht der Ursprungsposter. ;-)

Also, korrekt ausgedrückt: Im CSS des optimierten Codebeispiels befindet sich ein Selektor namens ".button a:active" mit den Deklarationen "position:relative;" und "top:1px;". Der kann doch weg, oder?

 

[MrMurphy]

Jo, da habe ich dich wohl verwechselt.

Der kann doch weg, oder?

Ja, wenn du den CSS-Effekt nicht haben willst. AchimB scheint das ja wichtig zu sein.