Erstellen einer <Schaltfläche>, die ein Link in HTML ist

Question

Im Grunde gefällt mir die Art und Weise, wie <input type="submit"> ist gestylt, mit der klickbaren Schaltfläche, wenn Sie ein wenig CSS hinzufügen. Normale Schaltflächen sind jedoch nicht als solche gestylt, sie haben keine solche Klickbarkeit ohne einige große CSS oder JS, und Sie müssen Bilder verwenden.

Ich habe die Übermittlungsschaltflächen in Links umgewandelt, indem ich die Formularaktion verwendet habe, aber dafür muss ich für jede Schaltfläche ein neues Formular erstellen. Wie kann ich einen goldenen Mittelweg finden? Die Verwendung mehrerer Formulare verursacht Probleme bei der Gestaltung, die ich nicht beheben kann, es sei denn, ich finde einen anderen Weg, um Schaltflächen zu erstellen, die Links in HTML sind, die einen Standardstil haben, der sie in einen gedrückten Zustand versetzt (und ich meine nicht die Standardeinstellungen des Browsers).

Irgendwelche Ideen?

Answer 1

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

Sie haben um einen Link gebeten, der wie eine Schaltfläche aussieht, also verwenden Sie einen Link und eine Schaltfläche :-) Dadurch wird das Standard-Browserdesign für Schaltflächen beibehalten. Die Schaltfläche selbst bewirkt nichts, aber wenn Sie darauf klicken, wird der übergeordnete Link aktiviert.

Demo:

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

Answer 2

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

Versuchen Sie <a href="http://stackoverflow.com"><button>Link Text</button></a> in jedem html-Validator wie https://validator.w3.org und Sie erhalten eine Fehlermeldung. Es hat wirklich keinen Sinn, eine Schaltfläche zu verwenden, wenn Sie no mit der Taste. Gestalten Sie einfach die <a> mit css, damit es wie eine Schaltfläche aussieht. Wenn Sie ein Framework wie Bootstrap verwenden, können Sie den/die Schaltflächenstil(e) anwenden btn , btn-primary etc.

jsfiddle : Link im Stil einer Schaltfläche

.btnStack {
  font-family: Oswald;
  background-color: orange;
  color: #000;
  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;
  color: #fff;
}

<link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<a href="http://stackoverflow.com" class="btnStack">stack<b>overflow</b>.com</a>

Answer 3

Verwenden Sie Javascript:

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

Sie können die Schaltfläche jederzeit in css gestalten. Hoffentlich hat es geholfen!

Viel Glück!

Answer 4

Sie haben drei Möglichkeiten:

• Gestalten Sie Links mit CSS so, dass sie wie Schaltflächen aussehen.

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

  Es ist sogar möglich, ihnen ein gedrücktes Aussehen zu verleihen, wenn sie angeklickt werden (unter Verwendung von Pseudoklassen wie :active), ohne dass ein Skript erforderlich ist. Viele große Websites, wie z. B. Google, fangen heutzutage ohnehin an, Schaltflächen aus CSS-Stilen zu erstellen, ob mit oder ohne Skripting.

• Fügen Sie ein separates <form>-Element um jedes einzelne Element herum ein.

  Wie Sie in Ihrer Frage erwähnt haben. Einfach und wird definitiv ohne Javascript (oder sogar CSS) funktionieren. Aber es fügt ein wenig zusätzlichen Code, der unordentlich aussehen kann.

• Verlassen Sie sich auf Javascript.

  Und genau das wollten Sie nicht tun.

Answer 5

Das ist ein bisschen einfacher und sieht genauso aus wie die Schaltfläche im Formular. Verwenden Sie einfach die Eingabe und wickeln Sie den Anker-Tag um sie.

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