Wie lässt man eine Schaltfläche wie einen Link aussehen?

Question

Ich muss eine Schaltfläche mit CSS wie einen Link aussehen lassen. Die Änderungen sind fertig, aber wenn ich darauf klicke, zeigt es, als ob es wie in einer Schaltfläche gedrückt wird. Irgendeine Idee, wie ich das entfernen kann, so dass die Schaltfläche als Link funktioniert, auch wenn sie angeklickt wird?

Answer 1

Sie können Schaltflächen nicht in allen Browsern zuverlässig als Links gestalten. Ich habe es versucht, aber in einigen Browsern gibt es immer irgendwelche seltsamen Probleme mit der Auffüllung, dem Rand oder der Schriftart. Entweder leben mit lassen die Schaltfläche aussehen wie eine Schaltfläche, oder verwenden Sie onClick und preventDefault auf einen Link.

Answer 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>