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?
287
#
dann zu verwendenevent.preventDefault()
. Das ist böse, genauso wie das Verknüpfen mitjavascript:void(0);
.Antworten:
quelle
button.link {...styles...}
dann<button class="link">Your button</button>
. Dies vermeidet auch die Verwendung,!important
was immer eine gute Idee ist.outline
. Einige Browser fügen ihm die Schaltflächen hinzu. Sie können einstellenoutline-color: transparent
.border-bottom
Gebrauchtext-decoration:underline
.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:
Das obige Beispiel ändert nur
button
Elemente, um die Lesbarkeit zu verbessern, kann jedoch problemlos auf Änderungeninput[type="button"], input[type="submit"]
undinput[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.
Code-Snippet anzeigen
quelle
outline-offset: 0;
wenn die Gliederung auf keine gesetzt ist?box-shadow: none
, um alles Styling auf dem Knopf zutext-transform: none;
Wenn es Ihnen nichts ausmacht, Twitter-Bootstrap zu verwenden, empfehlen wir Ihnen, einfach die Link-Klasse zu verwenden .
Ich hoffe das hilft jemandem :) Habt einen schönen Tag!
quelle
Versuchen Sie es mit der CSS-Pseudoklasse
:focus
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):
Mit this.href können Sie sogar auf das Ziel des Links in Ihrer Funktion zugreifen.
return false
verhindert 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.php
Wenn Sie möchten, dass Ihr Link tot ist, wenn js deaktiviert ist, verwenden Sie ihnhref="#"
quelle
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.
quelle
Sie können dies mit einfachem CSS erreichen, wie im folgenden Beispiel gezeigt
quelle