Wie kann ein <a href=""> Link wie eine Schaltfläche aussehen?

Ich habe dieses Schaltflächenbild:

Ich habe mich gefragt, ob es möglich ist, einen einfachen <a href="">some words</a>und stilvollen Link zu erstellen , der als diese Schaltfläche angezeigt wird.

Wenn es möglich ist, wie mache ich das?

Verwenden von CSS:

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    line-height: 25px;
}

<a class="button">Add Problem</a>

http://jsfiddle.net/GCwQu/

Überprüfen Sie die Dokumente von Bootstrap . Eine Klasse .btnexistiert und funktioniert mit dem aTag, aber Sie müssen .btn-*der .btnKlasse eine bestimmte Klasse hinzufügen .

z.B: <a class="btn btn-info"></a>

Sie können eine Schaltfläche einfach mit einem solchen Link umschließen <a href="#"> <button>my button </button> </a>

So etwas würde einem Knopf ähneln:

a.LinkButton {
  border-style: solid;
  border-width : 1px 1px 1px 1px;
  text-decoration : none;
  padding : 4px;
  border-color : #000000
}

Ein Beispiel finden Sie unter http://jsfiddle.net/r7v5c/1/ .

1. Versuche dies:

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
   <div class="container">
     <h2>Button Tags</h2>
     <a href="#" class="btn btn-info" role="button">Link Button</a>
     <button type="button" class="btn btn-info">Button</button>
     <input type="button" class="btn btn-info" value="Input Button">
     <input type="submit" class="btn btn-info" value="Submit Button">
   </div>

   Führen Sie das Code-Snippet ausErgebnisse ausblenden

   Erweitern Sie das Snippet

2. hrefVon dort aus können Sie die a- Tag-Zeile verwenden.

   <a href="URL" class="btn btn-info" role="button">Button Text</a>

Wenn Sie vermeiden möchten, ein bestimmtes Design mit CSS fest zu codieren, sondern sich auf die Standardschaltfläche des Browsers verlassen möchten, können Sie das folgende CSS verwenden.

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

Beachten Sie, dass es im IE wahrscheinlich nicht funktioniert.

Keine der anderen Antworten zeigt den Code an, bei dem die Verknüpfungstaste beim Schweben ihr Aussehen ändert.

Folgendes habe ich getan, um das zu beheben:

HTML:

<a href="http://www.google.com" class="link_button2">My button</a>

CSS:

.link_button2 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #1A4575;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  background: #3A68A1;
  color: #fee1cc;
  text-decoration: none;
  padding: 8px 12px;
  text-decoration: none;
  font-size: larger;
}

a.link_button2:hover {
  text-decoration: underline;
  background: #4479BA;
  border: solid 1px #20538D;

  /* optional different shadow on hover
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  */

}

JSFiddle: https://jsfiddle.net/adamovic/ovu3k0cj/

• Verwenden Sie die background-imageCSS-Eigenschaft für das <a>Tag
• Set display:blockund anpassen widthund heightin CSS

Dies sollte den Trick tun.

Ja, das kannst du machen.

Hier ist ein Beispiel:

a{
    background:IMAGE-URL;
    display:block;
    height:IMAGE-HEIGHT;
    width:IMAGE-WIDTH;
}

Natürlich können Sie das obige Beispiel an Ihre Bedürfnisse anpassen. Wichtig ist, dass es als Block ( display:block) oder Inline-Block ( display:inline-block) angezeigt wird .

Für einfaches HTML können Sie einfach ein img-Tag hinzufügen, wobei der src auf Ihre Bild-URL im HREF (A) festgelegt ist.

<a href="http://www.google.com"><img src="http://problemio.com/img/ui/add_problem.png" /></a>

Sie können eine Klasse für die Ankerelemente erstellen, die Sie als Schaltflächen anzeigen möchten.

Z.B:

Verwenden eines Bildes:

.button {
   display:block;
   background: url('image');
   width: same as image
   height: same as image
}

oder mit einem reinen CSS-Ansatz:

.button {
    background:#E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
}

Denken Sie immer daran, den Text mit etwas zu verbergen wie:

text-indent: -9999em;

Hier finden Sie eine hervorragende Galerie mit reinen CSS-Schaltflächen , und Sie können sogar den CSS3-Schaltflächengenerator verwenden

Viele Stile und Auswahlmöglichkeiten sind hier

Viel Glück

Sie haben zwei Optionen für die Konsistenz.

1. Verwenden Sie Framework-spezifische Tags und verwenden Sie sie auf der gesamten Website.
2. Verwenden Sie JavaScript, um einen Link für ein Schaltflächenelement zu emulieren, und lassen Sie die Schaltfläche dann mit den Schaltflächen des Browsers übereinstimmen. Diese CSS-Hacks im Button-Look werden niemals genau sein.

.

<button onclick="location.href = 'Homepage.html'; return false;">My Button</button>

return false; soll verhindern, dass das Standardverhalten der Schaltfläche angeklickt wird.

Nehmen Sie einfach normale CSS-Schaltflächenentwürfe und wenden Sie dieses CSS auf einen Link an (genauso wie auf eine Schaltfläche).

Beispiel:

<a href="#" class="stylish-button">Some words</a>

<style type="text/css">
.stylish-button {
    -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    color:#333;
    background-color:#FA2;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:none;
    font-size:16px;
    font-weight:700;
    padding:4px 16px;
    text-shadow:#FE6 0 1px 0
}
</style>

Wenn Sie nach dem Hinzufügen von Aktiv und Fokus Probleme haben, geben Sie Ihrer Schaltfläche einen Klassen- oder ID-Namen und fügen Sie diesen zu CSS hinzu

beispielsweise

//HTML Quelltext

<button id="aboutus">ABOUT US</button>

// CSS-Code

#aboutus{background-color: white;border:none;outline-style: none;}

Getestet mit Chrom 40 und Firefox 36

<a href="url" style="text-decoration:none">
   <input type="button" value="click me!"/>
</a>

Versuchen Sie diesen Code:

<code>

    <a href="#" class="button" > HOME </a>

    <style type="text/css">

        .button { background-color: #00CCFF; padding: 8px 16px; display: inline-block; text-decoration: none; color: #FFFFFF border-radius: 3px;}

        .button:hover { background-color: #0066FF; }

    </style>

</code>

Beobachten Sie dies (es wird erklärt, wie es geht) - https://youtu.be/euti4HAJJfk

So einfach ist das:

<a href="#" class="btn btn-success" role="button">link</a>

Fügen Sie einfach die Schaltfläche "class =" btn btn-success "& role = hinzu