wake-up-neo.net

Erstellen eines <Buttons>, eines Links in HTML

Grundsätzlich mag ich die Art und Weise, wie <input type="submit"> gestaltet wird, mit der anklickbaren Schaltfläche, wenn Sie ein wenig CSS hinzufügen. Normale Schaltflächen sind jedoch nicht als solche gestaltet. Sie können ohne die Verwendung von CSS oder JS nicht geklickt werden, und Sie müssen Bilder verwenden.

Ich habe mithilfe der Formularaktion "Senden" -Schaltflächen in Links eingefügt. Dies erfordert jedoch, dass ich für jede Schaltfläche ein neues Formular erstellen muss. Wie finde ich ein glückliches Medium? Die Verwendung mehrerer Formulare führt zu Problemen in meinem Styling, die ich scheinbar nicht beheben kann, es sei denn, ich finde einen anderen Weg, Schaltflächen zu erstellen, die Links in HTML sind und einen Standardstil haben, der dazu führt, dass sie einen gedrückten Status haben (und das meine ich nicht Browser-Standardeinstellungen). 

Irgendwelche Ideen?

19
AKor
<a href="#"><button>Link Text</button></a>

Sie haben nach einem Link gefragt, der wie eine Schaltfläche aussieht. Verwenden Sie also einen Link und eine Schaltfläche :-). Die Schaltfläche selbst macht nichts, aber wenn Sie darauf klicken, wird der übergeordnete Link aktiviert.

Demo:

<a href="http://stackoverflow.com"><button>Link Text</button></a>

32
edeverett

Sie haben drei Möglichkeiten:

  • Style-Links, die wie Buttons aussehen, die CSS verwenden.

    Schauen Sie sich einfach die hellblauen "Tags" unter Ihrer Frage an.

    Es ist sogar möglich, ihnen beim Anklicken (mit Pseudoklassen wie: active) ein deprimiertes Aussehen zu geben, ohne dass ein Skript erstellt wird. Viele große Websites wie Google beginnen heutzutage ohnehin mit der Erstellung von Schaltflächen aus CSS-Stilen, ob Skripten oder nicht.

  • Lege ein separates <form> -Element um jedes Element.

    Wie du in der Frage erwähnt hast. Einfach und funktioniert definitiv ohne Javascript (oder sogar CSS). Aber es fügt ein wenig zusätzlichen Code hinzu, der unordentlich aussehen kann.

  • Verlassen Sie sich auf Javascript.

    Was Sie sagten, Sie wollten nicht tun.

3
thomasrutter

Verwenden Sie Javascript:

<button onclick="window.location.href='/css_page.html'">CSS page</button>

Sie können den Button jederzeit in css gestalten. Hoffe es hat geholfen!

Viel Glück!

1
Freeranger

Ein bisschen einfacher und es sieht genauso aus wie der Button im Formular. Verwenden Sie einfach die Eingabe und wickeln Sie das Ankertag ein.

<a href="#"><input type="button" value="Button Text"></a>
0
Jared

WICHTIG:<button> sollte niemals ein Nachkomme von <a> sein.

Versuchen Sie <a href="http://stackoverflow.com"><button>Link Text</button></a> in einem beliebigen HTML-Validator wie https://validator.w3.org und Sie erhalten eine Fehlermeldung. Es hat wirklich keinen Sinn, eine Taste zu verwenden, wenn Sie die Taste nicht verwenden. Stylen Sie einfach den <a> mit css, um wie eine Schaltfläche auszusehen. Wenn Sie ein Framework wie Bootstrap verwenden, können Sie die Schaltflächenstile btn, btn-primary usw. anwenden.

jsfiddle: Button-Link

.btnStack {
  font-family: Oswald;
  background-color: orange;
  color: white;
  text-decoration: none;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

a.btnStack:hover {
  background-color: #000;
}
<link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<a href="http://stackoverflow.com" class="btnStack">stackoverflow.com</a>

0
joby-flick