it-swarm.com.de

Wie lässt man einen Button wie einen Link aussehen?

Ich muss eine Schaltfläche mit CSS wie einen Link aussehen lassen. Die Änderungen sind abgeschlossen, aber wenn ich darauf klicke, wird angezeigt, als ob es wie in einer Schaltfläche gedrückt wird. Hast du eine Idee, wie du das entfernen kannst, damit die Schaltfläche auch dann als Link fungiert, wenn du darauf klickst?

252
Pooja Jain
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>
308
adardesign

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, das Styling fokussierter Schaltflächen direkt in Firefox (Mozilla) abzubilden.

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 button -Elemente, um die Lesbarkeit zu verbessern. Es kann jedoch problemlos erweitert werden, um auch input[type="button"], input[type="submit"] - und input[type="reset"] - Elemente zu ändern. Sie können auch eine Klasse verwenden, wenn Sie möchten, dass nur bestimmte Schaltflächen wie Anker aussehen.

Siehe this JSFiddle für eine Live-Demo.

Beachten Sie auch, dass dies das Standard-Ankerstiling für Schaltflächen (z. B. blaue Textfarbe) anwendet. Wenn Sie also die Textfarbe oder irgendetwas anderes von Ankern und Knöpfen ä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;
}
84
Torben

Wenn es Ihnen nichts ausmacht, Twitter-Bootstrap zu verwenden, empfehlen wir Ihnen, einfach Linkklasse 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 :) Einen schönen Tag noch!

68
BoJack Horseman

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 On-Click-Ereignisse (Sie sollten keine Inline-JavaScript-Eventhandler 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 false verhindert lediglich, dass Browser dem Link folgen, wenn Sie darauf klicken.

wenn Javascript deaktiviert ist, funktioniert der Link wie ein normaler Link und lädt nur some/page.php - wenn du möchtest, dass dein Link tot ist , wenn js deaktiviert ist, benutze href="#"

5
knittl

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

4
Jacob R

Sie können dies mit einfachen 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>

enter image description here

2
GSB