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

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>

Answer 2

Wenn es Ihnen nichts ausmacht, mit Twitter-Bootstrap Ich schlage vor, Sie verwenden einfach die Link-Klasse .

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

Answer 3

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, brauchen Sie ein bisschen mehr Code. Es ist besonders knifflig, das Styling von fokussierten Schaltflächen in Firefox (Mozilla) richtig hinzubekommen.

Das folgende CSS stellt sicher, dass Anker und Schaltflächen die gleichen 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 die button Elemente, um die Lesbarkeit zu verbessern, aber es kann leicht erweitert werden, um die input[type="button"], input[type="submit"] y input[type="reset"] auch Elemente. Sie können auch eine Klasse verwenden, wenn Sie nur bestimmte Schaltflächen wie Anker aussehen lassen wollen.

Véase dieses JSFiddle für eine Live-Demo.

Bitte beachten Sie auch, dass dies die Standard-Anker-Gestaltung auf Schaltflächen anwendet (z.B. blaue Textfarbe). Wenn Sie also die Textfarbe oder irgendetwas anderes von Ankern und Schaltflächen ändern möchten, sollten Sie Folgendes tun 后 das obige CSS.

---

Der ursprüngliche Code (siehe Snippet) 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;
}

Answer 4

Ich denke, dies ist sehr einfach zu tun mit sehr wenigen Zeilen. hier ist meine Lösung

.buttonToLink{
   background: none;
   border: none;
   color: red
}

.buttonToLink:hover{
   background: none;
   text-decoration: underline;
}

<button  class="buttonToLink">A simple link button</button>

Answer 5

Versuchen Sie, die css-Pseudoklasse zu verwenden :focus

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

éditer wie für Links und Onclick-Ereignisse verwenden (Sie sollten nicht 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 wird lediglich verhindern, dass Browser dem Link folgen, wenn er angeklickt wird.

Wenn Javascript deaktiviert ist, wird der Link wie ein normaler Link funktionieren und nur geladen some/page.php -wenn Sie möchten, dass Ihr Link so aussieht tot wenn js deaktiviert ist, verwenden Sie href="#"