Wie kann eine Schaltfläche wie ein Link aussehen?

Ich muss eine Schaltfläche mithilfe von CSS wie einen Link aussehen lassen. Die Änderungen sind vorgenommen, aber wenn ich darauf klicke, wird angezeigt, als ob es wie in einer Schaltfläche gedrückt wird. Haben Sie eine Idee, wie Sie das entfernen können, damit die Schaltfläche auch beim Klicken als Link fungiert?

Der Code der akzeptierten Antwort funktioniert in den meisten Fällen, aber um eine Schaltfläche zu erhalten, die sich wirklich wie ein Link verhält, benötigen Sie etwas mehr Code. Es ist besonders schwierig, fokussierte Schaltflächen direkt in Firefox (Mozilla) zu gestalten.

Das folgende CSS stellt sicher, dass Anker und Schaltflächen dieselben CSS-Eigenschaften haben und sich in allen gängigen Browsern gleich verhalten:

button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238); 
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}

/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */

@supports (-moz-appearance:none) { /* Mozilla-only */
  button::-moz-focus-inner { /* reset any predefined properties */ 
    border: none;
    padding: 0;
  }
  button:focus { /* add outline to focus pseudo-class */
    outline-style: dotted;
    outline-width: 1px;
  }
}

Das obige Beispiel ändert nur buttonElemente, um die Lesbarkeit zu verbessern, kann jedoch problemlos auf Änderungen input[type="button"], input[type="submit"]und input[type="reset"]Elemente erweitert werden . Sie können auch eine Klasse verwenden, wenn nur bestimmte Schaltflächen wie Anker aussehen sollen.

In dieser JSFiddle finden Sie eine Live-Demo.

Bitte beachten Sie auch, dass dies das Standard-Anker-Styling auf Schaltflächen anwendet (z. B. blaue Textfarbe). Wenn Sie also die Textfarbe oder etwas anderes von Ankern und Schaltflächen ändern möchten, sollten Sie dies nach dem obigen CSS tun .

Der ursprüngliche Code (siehe Ausschnitt) in dieser Antwort war völlig anders und unvollständig.

/* Obsolete code! Please use the code of the updated answer. */

input[type="button"], input[type="button"]:focus, input[type="button"]:active,  
button, button:focus, button:active {
	/* Remove all decorations to look like normal text */
	background: none;
	border: none;
	display: inline;
	font: inherit;
	margin: 0;
	padding: 0;
	outline: none;
	outline-offset: 0;
	/* Additional styles to look like a link */
	color: blue;
	cursor: pointer;
	text-decoration: underline;
}
/* Remove extra space inside buttons in Firefox */
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
    border: none;
    padding: 0;
}

Wenn es Ihnen nichts ausmacht, Twitter-Bootstrap zu verwenden, empfehlen wir Ihnen, einfach die Link-Klasse zu verwenden .

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>

Ich hoffe das hilft jemandem :) Habt einen schönen Tag!

Versuchen Sie es mit der CSS-Pseudoklasse :focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

Bearbeiten wie für Links und Onclick-Ereignisse verwenden (Sie sollten keine Inline-Javascript-Ereignisbehandlungsroutinen verwenden, aber der Einfachheit halber werde ich sie hier verwenden):

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

Mit this.href können Sie sogar auf das Ziel des Links in Ihrer Funktion zugreifen. return falseverhindert nur, dass Browser dem Link folgen, wenn sie darauf klicken.

Wenn Javascript deaktiviert ist, funktioniert der Link wie ein normaler Link und wird nur geladen. some/page.phpWenn Sie möchten, dass Ihr Link tot ist, wenn js deaktiviert ist, verwenden Sie ihnhref="#"

Sie können Schaltflächen nicht zuverlässig als Links in Browsern formatieren. Ich habe es versucht, aber in einigen Browsern gibt es immer einige seltsame Probleme mit Polstern, Rändern oder Schriftarten. Lebe entweder damit, dass die Schaltfläche wie eine Schaltfläche aussieht, oder verwende onClick und verhindere den Standard für einen Link.

Sie können dies mit einfachem CSS erreichen, wie im folgenden Beispiel gezeigt

button {
    overflow: visible;
    width: auto;
}
button.link {
    font-family: "Verdana" sans-serif;
    font-size: 1em;
    text-align: left;
    color: blue;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
   
    -moz-user-select: text;
 
    /* override all your button styles here if there are any others */
}
button.link span {
    text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
    color: black;
}

<button type="submit" class="link"><span>Button as Link</span></button>