web-dev-qa-db-ja.com

HTMLリンクをボタンのようにするにはどうすればよいですか。

私はASP.NETを使用しています、私のボタンのいくつかはちょうどリダイレクトをします。私はむしろそれらが普通のリンクであったほうがいいです、しかし私は私のユーザーが外観の大きな違いに気付かれたくないです。画像をアンカー、つまりタグで囲まれていると考えましたが、ボタンのテキストを変更するたびに画像エディタを起動する必要はありません。

cssbutton
137
MatthewMartin

このクラスを適用する

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}
<a href="#" class="button">Example</a>
196
TStamper

私が考えるのと同じくらい愚かなことに、私はこの古代の質問を投稿するつもりです。

ボタン要素の周囲にアンカータグを折り返さないでください。

<a href="somepage.html"><button type="button">Text of Some Page</button></a>

この記事を読み、私が探していた望ましい結果なしに受け入れられた答えを試みた後、私は上記を試してみて、私がまさに欲しいものを手に入れました。

注意

これはIE9 +、Chrome、Safari、Firefox、そしておそらくはOperaでしか動作しません。

118
guanome

私見、より良い、よりエレガントな解決策があります。あなたのリンクがこれなら：

<a href="http://www.example.com">Click me!!!</a>

対応するボタンはこれです。

<form method="GET" action="http://www.example.com">
<input type="submit" value="Click me!!!">
</form>

このアプローチは単純なhtml要素を使用するのでより単純です、それでそれは何も変更せずにすべてのブラウザで動作するでしょう。さらに、ボタンのスタイルがある場合、このソリューションは新しいボタンに同じスタイルを無料で適用します。

33
Raul Luna

CSS3のappearanceプロパティは、ブラウザの組み込みの<button>スタイルを使って（アンカーを含む）あらゆる要素をスタイルする簡単な方法を提供します。

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
<body>
  <a class="btn">CSS Button</a>
</body>

CSS Tricks これについての詳細な概要がNiceにあります。 現在、Internet Explorerのどのバージョンでもこれがサポートされていません caniuse.comによると 。

22
Kevin Leary
a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

ブロック表示をすると、このように<a>タグで遊ぶことができます。あなたはそのボタンの感じのために影のような効果と背景色を与えるために境界を調整することができます:)

20
Ólafur Waage

角が丸いナイスボタンが欲しいなら、このクラスを使います：

.link_button {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    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: #4479BA;
    color: #FFF;
    padding: 8px 12px;
    text-decoration: none;
}
<a href="#" class="link_button">Example</a>
17
rupsray

あなたはJavaScriptでそれをすることができます：

  1. getComputedStyle(realButton)で本物のボタンのCSSスタイルを取得します。
  2. すべてのリンクにスタイルを適用してください。
/* javascript, after body is loaded */
'use strict';

{ // Namespace starts (to avoid polluting root namespace).
  
  const btnCssText = window.getComputedStyle(
    document.querySelector('.used-for-btn-css-class')
  ).cssText;
  document.querySelectorAll('.btn').forEach(
    (btn) => {
      
      const _d = btn.style.display; // Hidden buttons should stay hidden.
      btn.style.cssText = btnCssText;
      btn.style.display = _d;
      
    }
  );
  
} // Namespace ends.
<body>
  <h3>Button Styled Links</h3>
  <button class="used-for-btn-css-class" style="display: none"></button>
  <a href="//github.io" class="btn">first</a>
  <a href="//github.io" class="btn">second</a>
  <button>real button</button>
  <script>/* You may put JS here. */</script>
</body>
3
ilyaigpetrov

TStamperが言ったように、CSSクラスをそれに適用してそのように設計することができます。 CSSがリンクを使ってできることの数を増やすと並ぶものがなくなってきています、そして今はテーマのための見栄えの良いCSSボタンを作成することなどに焦点を当てているデザイングループがあります。

たとえば、-webkit-transitionプロパティとpseduo-classesを使用して、background-colorでトランジションすることができます。これらのデザインの中には非常にうるさいものになることがありますが、それは過去にフラッシュなどで行われていたかもしれないものに対する素晴らしい代替手段を提供します。

たとえば、（これらは私の意見では驚くべきものです）、 http://tympanus.net/Development/CreativeButtons/ （これは、ボタン用のまったく独創的な一連のアニメーションです。元のページのソースコード付き） http://www.commentredirect.co.jp/make-awesome-flat-buttons-css/ （同じ行に沿って、これらのボタンには素敵だが最小限のトランジション効果があり、新しいボタンを使用します」フラットな "デザインスタイル。）

3
graemeboy

遅れをとらない答え：

私が最初にASPで働き始めて以来、私はこれのオンとオフに取り組んできました。これが私が思い付いた最高のものです：

概念：タグを持つカスタムコントロールを作成します。それから、JavaScriptでdocument.locationを希望の値に設定するonclickイベントをボタンに入れました。

LinkBut​​tonと混同しても簡単に取得できるように、コントロールButtonLinkを呼び出しました。

aspx：

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ButtonLink.ascx.vb" Inherits="controls_ButtonLink" %>

<asp:Button runat="server" ID="button"/>

コードビハインド：

Partial Class controls_ButtonLink
Inherits System.Web.UI.UserControl

Dim _url As String
Dim _confirm As String

Public Property NavigateUrl As String
    Get
        Return _url
    End Get
    Set(value As String)
        _url = value
        BuildJs()
    End Set
End Property
Public Property confirm As String
    Get
        Return _confirm
    End Get
    Set(value As String)
        _confirm = value
        BuildJs()
    End Set
End Property
Public Property Text As String
    Get
        Return button.Text
    End Get
    Set(value As String)
        button.Text = value
    End Set
End Property
Public Property enabled As Boolean
    Get
        Return button.Enabled
    End Get
    Set(value As Boolean)
        button.Enabled = value
    End Set
End Property
Public Property CssClass As String
    Get
        Return button.CssClass
    End Get
    Set(value As String)
        button.CssClass = value
    End Set
End Property

Sub BuildJs()
    ' This is a little kludgey in that if the user gives a url and a confirm message, we'll build the onclick string twice.
    ' But it's not that big a deal.
    If String.IsNullOrEmpty(_url) Then
        button.OnClientClick = Nothing
    ElseIf String.IsNullOrEmpty(_confirm) Then
        button.OnClientClick = String.Format("document.location='{0}';return false;", ResolveClientUrl(_url))
    Else
        button.OnClientClick = String.Format("if (confirm('{0}')) {{document.location='{1}';}} return false;", _confirm, ResolveClientUrl(_url))
    End If
End Sub
End Class

この方式の利点：これはコントロールのように見えます。あなたはそれのための単一のタグを書きます、<ButtonLink id = "mybutton" navigateurl = "blahblah" />

結果のボタンは「本物の」HTMLボタンであるため、本物のボタンのように見えます。 CSSでボタンの外観をシミュレートしてから、さまざまなブラウザでさまざまな外観で闘う必要はありません。

能力は限られていますが、プロパティを追加することで簡単に拡張できます。 text、enabled、およびcssclassの場合と同様に、ほとんどのプロパティで基本ボタンに「パススルー」するだけで済みます。

誰かがより簡単で、よりきれいな、あるいはより良い解決策を手に入れたなら、私はそれを聞いてうれしいです。これは痛みですが、うまくいきます。

2
Jay

このクラスを使用してください。 buttonタグにaクラスを使用して適用すると、リンクはボタンと同じように見えます。

こちらISデモJSFIDDLE

または

こちらISその他のデモJSFIDDLE

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    border: solid 1px #da7c0c;
    background: #478dad;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .3em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
    position: relative;
    top: 1px;
}
2
Muhammad Ashikuzzaman

標準のボタンを作成して、それをリンクの背景画像として使用できます。その後、画像を変更せずにリンク内のテキストを設定できます。

特別にレンダリングされたボタンがない場合の最善の解決策は、TStamperとÓlafurWaageによってすでに与えられている2つです。

2
cjk

これは、CSSの詳細についてももう少し詳しく説明し、いくつかの画像を提供します。

http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/

2
GBa

Asp：LinkBut​​tonはどうですか？

あなたはそれをすることができます - 私はTStamperのエントリを使って、リンクボタンを標準的なボタンのように見せました。 text-decoration: noneの設定にもかかわらず、ホバーしたときに下線がテキストの下に表示されました。

リンクボタン内にstyle="text-decoration: none"を追加することで、ホバーアンダーラインを止めることができました。

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>
2
Christian

これが私が使ったものです。リンクボタンは

<div class="link-button"><a href="/">Example</a></div>

CSS

/* body is sans-serif */ 

.link-button {
    margin-top:15px;
    max-width:90px;
    background-color:#eee;
    border-color:#888888;
    color:#333;
    display:inline-block;
    vertical-align:middle;
    text-align:center;
    text-decoration:none;
    align-items:flex-start;
    cursor:default;
    -webkit-appearence: Push-button;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    font-size: 1em;
    font-family: inherit;
    border-color: #000;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    min-height: 30px;
}

.link-button a {
    margin-top:4px;
    display:inline-block;
    text-decoration:none;
    color:#333;
}

.link-button:hover {
    background-color:#888;
}

.link-button:active {
    background-color:#333;
}

.link-button:hover a, .link-button:active a {
    color:#fff;
}
1
Andrew Howden

境界線、色、背景色のプロパティを使用することで、ボタンに似たHTMLリンクを作成できます。

a {
background-color: white;
color: black;
padding: 5px;
text-decoration: none;
border: 1px solid black;
}
a:hover {
background-color: black;
color: white;

}
<a href="https://stackoverflow.com/

">Open StackOverflow</a>

お役に立てれば ：]

1
Sree Ramana

私はasp:Buttonを使います。

<asp:Button runat="server"
            OnClientClick="return location='targetPage', true;"
            UseSubmitBehavior="False"
            Text="Button Text Here"
/>

このように、ボタンの操作は完全にクライアント側であり、ボタンはtargetPageへのリンクのように機能します。

1
Manus Hand

シンプルなボタンのCSSは今、あなたはあなたのエディタで遊ぶことができます

a {
  display: inline-block;
  background: #000000c9;
  color: #000;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
}
a:hover {
  background:#000
  cursor: pointer;
  transition: 0.3s ease-in;
}

リンクタグ

<a href="#">Hover me<a>
0
internthings

下のスニペットを使用してください。

    .a{
  color: $brn-acc-clr;
  background-color: transparent;
  border-color: #888888;

  &:hover:active{
    outline: none;
    color: #888888;
    border-color: #888888;
  }
  &:fill{
    background-color: #888888;
    color: #fff;
    box-shadow: 0 3px 10px rgba(#888888, 0.5);
    &:hover:active{
      color: #fff;
    }
    &:hover:not(:disabled){
      transform: translateY(-2px);
      background-color: darken(#888888, 4);
    }
  }
}
0
Himadri Mandal
.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}
<a href="#" class="button">Example</a>
0
user5625080

これは私のために働きました。ボタンのように見え、リンクのように動作します。あなたはそれを例えばブックマークすることができます。

<a href="mypage.aspx?param1=1" style="text-decoration:none;">
    <asp:Button PostBackUrl="mypage.aspx?param1=1" Text="my button-like link" runat="server" />
</a>
0
Andrej Adamenko