Wie kann eine Schaltfläche wie ein Link aussehen?

287

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?

James Hibbard
quelle
4
Onclick-Ereignisse auf Links sind so einfach wie auf Schaltflächen
Stricken
2
@knittl, @cletus Tatsächlich haben Links und Schaltflächen in HTML sehr unterschiedliche Bedeutungen. Sie sollten whatwg.org/specs/web-apps/current-work/multipage/… lesen . Es ist möglicherweise keine gute Idee, Schaltflächen so zu gestalten, dass sie wie Links aussehen, aber dies hängt vom Design der Benutzeroberfläche ab, während die Verwendung von Links stattdessen gegen HTML-Spezifikationen verstößt.
Anton Strogonoff
5
Es gibt einige Gründe, warum das Stylen einer Schaltfläche wie eines Links erforderlich sein kann. (1) Schaltfläche hat Typ = "Senden" (2) Schaltfläche hat ausgefallenes Styling, dh Hintergrundbild mit variabler Länge
TJ.
95
Es kann auch semantisch korrekter sein, wenn etwas eine Schaltfläche ist, selbst wenn Sie möchten, dass es wie ein Link aussieht. Stellen Sie sich zum Beispiel ein Paar "Alle erweitern | Alle reduzieren" -Links vor, die etwas auf der Seite ändern. Wenn Sie auf diese klicken, wird eine Aktion ausgeführt, der Benutzer wird jedoch nirgendwohin geführt. Die Semantik entspricht der einer Schaltfläche. Der Designer hat jedoch möglicherweise aus Gründen des Erscheinungsbilds Links angegeben. Das ist also eigentlich eine sehr gute Frage.
Shacker
17
Ich verwende eine Schaltfläche anstelle eines Links, da ich beim Auslösen von JS-Methoden mit einem Link gezwungen bin, einen Link zu erstellen, um ihn #dann zu verwenden event.preventDefault(). Das ist böse, genauso wie das Verknüpfen mit javascript:void(0);.
Archonic

Antworten:

351

button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}
<button> your button that looks like a link</button>

Adardesign
quelle
24
Meine sehr kleine Variation der Geige - verschob die Textdekoration: Unterstreichen Sie die Regel, um auf den Knopf zu wirken: Schweben. siehe in meiner gespaltenen Geige .
odedbd
10
Wenn Sie nicht möchten , dass alle Tasten als Links, Umfang den Stil mit so etwas wie gestylt werden button.link {...styles...}dann <button class="link">Your button</button>. Dies vermeidet auch die Verwendung, !importantwas immer eine gute Idee ist.
Archonic
3
Denken Sie daran, sich zu kümmern outline. Einige Browser fügen ihm die Schaltflächen hinzu. Sie können einstellen outline-color: transparent.
SiliconMind
4
Bitte entfernen Sie die Gliederung nicht, da dies Ihre Schaltfläche unzugänglich machen würde: outtinenone.com
Dominik
4
Anstelle von border-bottomGebrauch text-decoration:underline.
ʙᴀᴋᴇʀ ʙᴀᴋᴇʀ
86

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.

Torben
quelle
Warum brauchen Sie, outline-offset: 0;wenn die Gliederung auf keine gesetzt ist?
Mohamad
Ich musste hinzufügen box-shadow: none, um alles Styling auf dem Knopf zu
löschen
Ein anderer:text-transform: none;
Shone Tow
75

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!

BoJack Reiter
quelle
7
Dies hat großartig funktioniert, aber im Gegensatz zu einem echten <a> -Link etwas Polsterung hinterlassen. Fügen Sie einfach eine Art Polsterung hinzu: 0! Wichtig und es ist golden. Vielen Dank!
David
Dies scheint eine Formularvalidierung mit jquery validate auszulösen
Paul Becker
Dies ist keine zuverlässige Lösung. Dies unterbricht nicht nur auf subtile Weise die vertikale Zentrierung, sondern deaktiviert implizit auch die Änderung des Textstils und der Schriftgröße.
Radon Rosborough
5

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="#"

stricken
quelle
Ich würde es verwenden, bin mir aber nicht sicher, welche Änderungen angewendet werden sollen, damit die Schaltfläche nicht eingerückt wird.
Ja. N auch nach dem Geben der Paddina als 0 bleibt die Einrückung bestehen
4

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.

Jacob Rask
quelle
2
Das war damals der Fall, als Browser native Widgets verwendeten. Gilt das immer noch für neuere Browser?
Aij
1
Es ist 2017 und mein FireFox verwendet immer noch native Widgets.
Michael Scheper
2

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>

Geben Sie hier die Bildbeschreibung ein

GSB
quelle