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


154

私はASP.NETを使用していますが、一部のボタンはリダイレクトのみを行います。むしろ普通のリンクにしたいのですが、見た目の違いにユーザーに気付かれたくないです。アンカー、つまりタグでラップされた画像を検討しましたが、ボタンのテキストを変更するたびに画像エディターを起動する必要はありません。


2
:私はこの質問のために受け入れ応答を参照してくださいstackoverflow.com/questions/547222/...
tvanfosson

いくつかの側面(色、サイズ、フォント)を構成した後、このようなサービスを使用してCSSを生成できます。
バジルブルク14

1
私はjavascriptでそれを行う方法に答えますが、質問には「javascript」タグがありません
ilyaigpetrov

2
@ilyaigpetrov先に進んで回答を投稿してください。7年前にこのQを聞いたところ、これは一般的な問題であり、人々はさまざまな解決策を必要としてきました。
MatthewMartin、2016

回答:


213

このクラスをそれに適用します

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


12
これの難点は、CSSでボタンの外観を再現する必要があることです。ただし、残念ながら、ブラウザーやブラウザーのバージョンが異なれば、ボタンの外観も異なります。そのため、一部のブラウザーではおかしな外観を受け入れるか、ユーザーがどのブラウザーとどのバージョンを使用しているかを把握し、別のスタイルを選択するための一連のコードを用意する必要があります。これは大変なトラブルであり、次にブラウザの新しいバージョンが出たときに壊れる可能性があります。
ジェイ

これは、aタグ(a {display: block ...})に直接適用した場合にのみ機能しますが、これは受け入れられません。タグclass内の属性aが機能しない理由はありますか?:(私も試したのFirefox 27. Iを使用していますa.button {...}し、それはどちらか動作しません。
just_a_girl

1
@Jayの妥協案としては<input type="submit">、や<button>要素のスタイルを定義して、ブラウザのデフォルトを使用しないようにし(可能な場合)、これらを上記のスタイルに一致させることができ.buttonます。これは、完全に削除しない場合でも、違いを減らすのに役立つはずであり、ブラウザーのタイプとバージョンをスニッフィングする(信頼性が低い-当然のことながら)メソッドよりも優れています。
Ollieベネット

@OllieBennett True:ボタンの外観を完全に再定義できます。私はこれを試みたことがありません、あなたがオーバーライドしなければならないスタイルのいくつの面がわからないのか。痛みのように聞こえますが、試したことがないので、他のオプションと比較してどれほどの痛みがあるかはわかりません。
Jay

@CraigGjerdingen .link_buttonに使用したスタイルが本当に好きです。CSS3の使用は間違いなくこの答えを更新します。また、「通常の」ブラウザーボタンとは似ていないが、ボタンアフォーダンスがまだあるスタイルを使用すると、ブラウザーのスニッフィングの問題が解決されます(imo)のスタイルを再定義する必要もありません<input type="submit">
Evan Donovan

128

アンカータグをボタン要素の周りに単にラップしないでください。

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

これは、IE9 +、Chrome、Safari、Firefox、およびおそらくOperaで機能します。


8
@Dean_Wilsonはie6 :(
Robotnikの

@feeel一貫した外観のボタンを取得する方が簡単だったからです。CSSを使用する場合、ネイティブスタイルはありません。誰か他の人がとにかくその答えをすでに持っていました。
グアノメ2012年

1
ネイティブブラウザーのボタンスタイルを模倣しようとするCSSをいじる必要がないので、このソリューションが好きです。ただし、Firefoxでは、でのみ機能し<button type="button">ます。type属性がないと、常にポストバックが行われ、リンクは無視されます。
Tobias

@Pyitoechito ChromeとSafariがwebkitにあるので、きっとそうなるでしょう。その意志のように見えるjsfiddle.net/9Gt7y
guanome

31
<button>と<a>のネストは有効なHTMLではなく、未定義の動作があります。ここで詳細な回答を参照してください。stackoverflow.com/questions/6393827/…動作する場合、それは単なる偶然です。
オーディン、

36

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

<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要素を使用しているためより単純であり、何も変更せずにすべてのブラウザーで機能します。さらに、ボタンのスタイルがある場合、このソリューションは同じスタイルを新しいボタンに無料で適用します。


5
さて、私は今日これをテストしました..。.. ASP.NET Webフォームを使用していない場合はうまく機能します。ASP.NET Webフォームはページ全体をフォームタグでラップし、ネストされたフォームはまったく機能していないようです。ASP.NETフォームタグの外部では機能しますが、使用はリンクの最上部と最下部に制限されます。
MatthewMartin 2012年

3
シンプルで効果的。display:inlineスタイルをフォーム要素に追加することもできます。それ以外の場合は、ボタン/アンカー/入力とは異なるブロックのように扱われます。
nimrodm 2013年

良い質問。私もそうは思いません。ただし、ここで示した他のソリューション、たとえばボタンタグを使用するソリューションは、googlebotでは機能しません。
Raul Luna 14

私はこれをDjangoで試しましたが、ボタンが別のフォーム内に配置されると、リンクとして機能するのではなく、データをPOSTします。
wobbily_col 2015年

1
ボタンでJavaScriptのリダイレクトを行うこともできます。など新しいタブで開くには真ん中クリックすることができません「クリップボードへのコピーリンクアドレス」など、マウスでその上に置くと、リンク先のプレビュー-しかし、今ではリンクではありません
アレクサンダー・テイラー

27

CSS3 appearanceプロパティは、ブラウザーの組み込みスタイルで任意の要素(アンカーを含む)をスタイルする簡単な方法を提供し<button>ます。

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

CSS Tricksには、これについてより詳細な概要があります。caniuse.comによると、現在Internet Explorer のどのバージョンもこれをサポートしていないことに注意してください


5
これはCSS3仕様から削除されました。htmlvalidator.com/help.php?m=1&h=appearance
user1431356

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

あなたが<a>それらにブロック表示を与えるならば、あなたはこのようなタグで遊ぶことができます。ボーダーを調整して、そのボタンの感触のような陰影のような効果と背景色を与えることができます:)


18

角が丸い素敵なボタンが必要な場合は、次のクラスを使用します。

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


3
これと最高ランクの回答をjsFiddleに追加しました。jsfiddle.net/5z6ew1m0/6
Craig Gjerdingen

あなたもそれに追加したいかもしれませmarginん。そうでなければ、それをスタイリングする良い仕事。
c00000fd 2017年

3

TStamperが言ったように、CSSクラスをそれに適用して、そのように設計することができます。CSSがリンクを使用して実行できることの数が飛躍的に向上したため、テーマ用の見栄えのよいCSSボタンの作成などに焦点を合わせたデザイングループが存在するようになりました。

たとえば、-webkit-transitionプロパティとpseduo-classesを使用して、background-colorで遷移を行うことができます。これらのデザインの一部はかなり気の利いたものになる可能性がありますが、これは、たとえば、フラッシュで行われなければならなかったであろうものに対する素晴らしい代替案を提供しています。

たとえば(これらは私の意見では驚くべきものです)、http://tympanus.net/Development/CreativeButtons/(これはボタンの完全にすぐに 使える一連のアニメーションであり、元のページにソースコードが付いています)。 http://www.commentredirect.com/make-awesome-flat-buttons-css/(同じように、これらのボタンには見栄えは良いが最小限の遷移効果があり、新しい「フラット」なデザインスタイルを利用しています。)


3

あなたはJavaScriptでそれを行うかもしれません:

  1. で実際のボタンのCSSスタイルを取得しますgetComputedStyle(realButton)
  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>


2

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

特別にレンダリングされたボタンを使用しない場合の最適なソリューションは、TStamperとÓlafurWaageによってすでに提供されている2つです。



2

かなり遅れた答え:

私はASPでの作業を始めて以来、この問題に取り組んでいます。これが私が思いついた最高のものです:

コンセプト:タグを持つカスタムコントロールを作成します。次に、ボタンに、JavaScriptでdocument.locationを目的の値に設定するonclickイベントを配置します。

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

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

このスキームの利点:コントロールのように見えます。そのために1つのタグ<ButtonLink id = "mybutton" navigateurl = "blahblah" />を記述します

結果のボタンは「実際の」HTMLボタンなので、実際のボタンのように見えます。CSSを使用してボタンの外観をシミュレートし、異なるブラウザーで異なる外観に苦労する必要はありません。

機能は限られていますが、プロパティを追加することで簡単に拡張できます。ほとんどのプロパティは、テキスト、有効、cssclassの場合と同様に、基になるボタンに「パススルー」する必要があるだけの可能性があります。

誰かがより簡単、よりクリーン、またはより良い解決策を持っているなら、私はそれを聞いてうれしいです。これは苦痛ですが、うまくいきます。


2

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

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

ただし、ボタンのようには見えません。誰があなたに反対票を投じたかはわかりません。あなたが提供したコードのJSフィドルは次のとおり
MatthewMartin

2

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

Linkbuttonは、リンクのように見えますがボタンのように機能するものを作成します。質問は反対を要求します:ボタンのように見えますがリンクのように振る舞う何か。
ジェイ

2

境界線、色、および背景色のプロパティを使用することにより、ボタンのような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>

お役に立てれば :]


2

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

または

ここに別のデモ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;
}

1

私はasp:Button

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

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


asp:Button実際にどのように見えるかを示す良い仕事なので、他のユーザーを助けることができます!
ユーザーではないユーザー

0

.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

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

    .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

シンプルなボタン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>

-1

これでうまくいきました。ボタンのように見え、リンクのように動作します。たとえばブックマークできます。

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.