2016-05-24 8 views
-1

Ich weiß, dass sein Thema diskutiert wurde, aber ich bekomme keine klare Antwort.HTML-Datei und CSS-Datei für Schaltflächen, die Links sind?

Ich möchte zwei Schaltflächen erstellen, sobald sie geklickt werden, fungieren sie als Links zu verschiedenen Seiten. Ich habe diesen Code in meiner HTML-Datei verwendet und eine CSS-Datei erstellt, um die Darstellung der Schaltflächen zu bearbeiten. Meine Frage ist, wie ich die zwei Knöpfe in der HTML-Datei benenne, so dass ich zum Beispiel ihre Stile in der CSS-Datei einzeln bearbeiten kann.

[HTML Code]

 <button onclick="location.href='something.html'">Click this</button> 

     <button onclick="location.href='http://www.blah.com'">Click this too</button 

[CSS-Code]

   button{ 
      float: left; 
      position: relative; 
      left: 40%; 
      background: red; 

      } 
+0

Wenn Sie einen Link haben, verwenden Sie einen Link und stylen Sie den Link dann wie eine Schaltfläche. Was das individuelle Stylen angeht, klingt es so, als müssten Sie HTML & CSS im Allgemeinen lernen, wofür Stack Overflow nicht geeignet ist. Erwägen Sie, ein Tutorial zu googeln oder ein Buch zu kaufen. [MDN ist ein guter Anfang] (https://developer.mozilla.org/en-US/docs/Web/CSS). – zzzzBov

+0

Ja, ich würde das machen, dachte aber, dass es einfacher ist, wie ich es gemacht habe und ich habe den genauen Code hier gefunden, weil jemand eine ähnliche Frage hatte, dann erkannte ich, dass ich die Buttons nicht individuell bearbeiten kann. Danke – belu

Antwort

0

Die Leute werden Ihnen sagen, Links wie Schaltflächen zu stylen, die zwar elegant, nicht unterstützt wird. Ich habe das oft vor langer Zeit für Navigationslinks getan, und ich fand nur die padding-bottom und padding-top ausgeschlossen durch den Benutzer-Agent. Dies liegt daran, dass Links oder <a>inline Elemente sind und Inline-Elemente nicht genauso reagieren wie block s.

Umfassend die button in einer a war meine Lösung, zusammen mit meinem CSS auf diese Tasten zeigen. Das Tag a kann ignoriert werden, außer beim Hinzufügen Ihres Links.

<a href="http://example.com"> 
    <button>Example</button> 
</a> 
+0

Meine Frage ist, wie man sie individuell style. Meine Lösung macht genau das. Ich kann die Farbe jeder Taste und die Größe ändern ... Wenn Sie eine Möglichkeit haben, diese Freigabe zu machen, weil das, was Sie dort aufstellen, sehr allgemein ist. – belu

+0

Werfen Sie einen Blick auf diese Geige. Ich style Knöpfe in Größe, Übergängen, Farben, Grenzen, alles. Der Himmel ist die Grenze. https://jsfiddle.net/joshcrowe/yfy10wmm/ – Crowes

+0

Ok danke. Werde das versuchen. – belu

3

Sie eine Klasse oder ID verwenden würden die beiden Elemente

#button1 { 
 
    background: red 
 
} 
 
#button2 { 
 
    background: green 
 
}
<button id="button1">Click this</button> 
 
<button id="button2">Click this too</button

zu unterscheiden

Die Barebone-Grundlagen von CSS.

+0

Omg danke ... – belu

+0

Eigentlich habe ich es gerade ausprobiert und ich glaube nicht, dass ich das da brauche, da die Buttons Links sind. Ich denke, ich muss die Links so formatieren, dass sie wie Buttons aussehen, oder sie so belassen, wie ich es gemacht habe. Aber danke, dass du versucht hast zu helfen. – belu

+0

Ich habe dir das genaue HTML nicht gegeben, offensichtlich. Was ich Ihnen gegeben habe, war eine Anleitung zur Verwendung von ID-Attributen und die Zuweisung von Stilen zu ihnen. –

Verwandte Themen