• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

2 Button in einer Zeile

AchimB

Neues Mitglied
Hey Leute,

Ich habe auf meiner Seite einen Button mit folgendem Code
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?
 
Den Quelltext für den zweiten Button fügst du einfach hinter dem ersten ein. Zum Beispiel

Code:
      <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.
 
Den Quelltext für den zweiten Button fügst du einfach hinter dem ersten ein. Zum Beispiel

Code:
      <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.
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;
}

.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 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?
 
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.
 
@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?
 
Jo, da habe ich dich wohl verwechselt.

Code:
Der kann doch weg, oder?

Ja, wenn du den CSS-Effekt nicht haben willst. AchimB scheint das ja wichtig zu sein.
 
Zuletzt bearbeitet:
Zurück
Oben