web-dev-qa-db-ja.com

ボタンをリンクのように見せる方法は？

ボタンをCSSを使ったリンクのように見せる必要があります。変更は完了しましたが、クリックすると、まるでボタンのように押されているように見えます。クリックしてもボタンがリンクとして機能するように、これを削除する方法がありますか。

cssbuttonhyperlink
244
Pooja Jain

HTML

<button>your button that looks like a link</button>

CSS

button {
     background:none;
     color:inherit;
     border:none; 
     padding:0!important;
     font: inherit;
     /*border is optional*/
     border-bottom:1px solid #444; 
     cursor: pointer;
}

JSfiddleのデモを参照

297
adardesign

受け入れられた答えのコードはほとんどの場合にうまくいきますが、実際にリンクのように振る舞うボタンを得るためにはもう少しコードが必要です。 Firefox（Mozilla）でフォーカスのあるボタンのスタイルを正しく設定するのは特に難しいことです。

次のCSSは、アンカーとボタンが同じCSSプロパティを持ち、すべての一般的なブラウザで同じ動作をすることを保証します。

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;
  }
}

上記の例では、読みやすさを向上させるためにbutton要素のみを変更していますが、input[type="button"], input[type="submit"]およびinput[type="reset"]要素も変更するように簡単に拡張できます。特定のボタンだけをアンカーのように見せたい場合は、クラスを使用することもできます。

ライブデモについては this JSFiddle をご覧ください。

これはデフォルトのアンカースタイルをボタンに適用することにも注意してください（例えば青いテキスト色）。そのため、テキストの色や他のアンカーやボタンの色を変更したい場合は、これを行う必要がありますafter上記のCSS。

この回答の元のコード（スニペットを参照）は完全に異なっていて不完全でした。

/* 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;
}
83
Torben

Twitterブートストラップ を使用しても構わない場合は、単に リンククラス を使用することをお勧めします。

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

これが誰かに役立つことを願っています:)良い一日を！

67
BoJack Horseman

cSS擬似クラス:focusを使ってみてください。

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

編集リンクやonclickイベントでは使用します（インラインJavaScriptイベントハンドラは使用しないでください。ただし、わかりやすくするためにここで使用します）。

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

this.hrefを使えば、関数の中でリンクのターゲットにアクセスすることさえできます。 return falseは、クリックされたときにブラウザがリンクをたどらないようにするだけです。

javascriptが無効の場合、リンクは通常のリンクとして機能し、some/page.phpをロードします。jsが無効のときにリンクをdeadにする場合は、href="#"を使用します。

5
knittl

ブラウザ全体でボタンを確実にリンクとしてスタイル設定することはできません。私はそれを試したが、いくつかのブラウザで常にいくつかの奇妙なパディング、マージンやフォントの問題があります。ボタンをボタンのように見せるか、リンクにonClickとpreventDefaultを使用します。

4
Jacob R

以下の例に示すように、単純なCSSを使用してこれを達成できます。

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