私はASP.NETを使用していますが、一部のボタンはリダイレクトのみを行います。むしろ普通のリンクにしたいのですが、見た目の違いにユーザーに気付かれたくないです。アンカー、つまりタグでラップされた画像を検討しましたが、ボタンのテキストを変更するたびに画像エディターを起動する必要はありません。
私はASP.NETを使用していますが、一部のボタンはリダイレクトのみを行います。むしろ普通のリンクにしたいのですが、見た目の違いにユーザーに気付かれたくないです。アンカー、つまりタグでラップされた画像を検討しましたが、ボタンのテキストを変更するたびに画像エディターを起動する必要はありません。
回答:
このクラスをそれに適用します
.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>
a
タグ(a {display: block ...}
)に直接適用した場合にのみ機能しますが、これは受け入れられません。タグclass
内の属性a
が機能しない理由はありますか?:(私も試したのFirefox 27. Iを使用していますa.button {...}
し、それはどちらか動作しません。
<input type="submit">
、や<button>
要素のスタイルを定義して、ブラウザのデフォルトを使用しないようにし(可能な場合)、これらを上記のスタイルに一致させることができ.button
ます。これは、完全に削除しない場合でも、違いを減らすのに役立つはずであり、ブラウザーのタイプとバージョンをスニッフィングする(信頼性が低い-当然のことながら)メソッドよりも優れています。
<input type="submit">
アンカータグをボタン要素の周りに単にラップしないでください。
<a href="somepage.html"><button type="button">Text of Some Page</button></a>
これは、IE9 +、Chrome、Safari、Firefox、およびおそらくOperaで機能します。
<button type="button">
ます。type属性がないと、常にポストバックが行われ、リンクは無視されます。
私見、より良いエレガントな解決策があります。あなたのリンクがこれなら:
<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要素を使用しているためより単純であり、何も変更せずにすべてのブラウザーで機能します。さらに、ボタンのスタイルがある場合、このソリューションは同じスタイルを新しいボタンに無料で適用します。
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 のどのバージョンもこれをサポートしていないことに注意してください。
角が丸い素敵なボタンが必要な場合は、次のクラスを使用します。
.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>
margin
ん。そうでなければ、それをスタイリングする良い仕事。
TStamperが言ったように、CSSクラスをそれに適用して、そのように設計することができます。CSSがリンクを使用して実行できることの数が飛躍的に向上したため、テーマ用の見栄えのよいCSSボタンの作成などに焦点を合わせたデザイングループが存在するようになりました。
たとえば、-webkit-transitionプロパティとpseduo-classesを使用して、background-colorで遷移を行うことができます。これらのデザインの一部はかなり気の利いたものになる可能性がありますが、これは、たとえば、フラッシュで行われなければならなかったであろうものに対する素晴らしい代替案を提供しています。
たとえば(これらは私の意見では驚くべきものです)、http://tympanus.net/Development/CreativeButtons/(これはボタンの完全にすぐに 使える一連のアニメーションであり、元のページにソースコードが付いています)。 http://www.commentredirect.com/make-awesome-flat-buttons-css/(同じように、これらのボタンには見栄えは良いが最小限の遷移効果があり、新しい「フラット」なデザインスタイルを利用しています。)
あなたはJavaScriptでそれを行うかもしれません:
getComputedStyle(realButton)
。/* 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>
これはCSSの詳細にも少し入り、いくつかの画像を提供します:
http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/
かなり遅れた答え:
私はASPでの作業を始めて以来、この問題に取り組んでいます。これが私が思いついた最高のものです:
コンセプト:タグを持つカスタムコントロールを作成します。次に、ボタンに、JavaScriptでdocument.locationを目的の値に設定するonclickイベントを配置します。
コントロールButtonLinkを呼び出したので、LinkButtonと混同されても簡単に取得できます。
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の場合と同様に、基になるボタンに「パススルー」する必要があるだけの可能性があります。
誰かがより簡単、よりクリーン、またはより良い解決策を持っているなら、私はそれを聞いてうれしいです。これは苦痛ですが、うまくいきます。
これは私が使用したものです。リンクボタンは
<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;
}
asp:LinkButtonはどうでしょうか?
あなたはそれを行うことができます-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"
/>
境界線、色、および背景色のプロパティを使用することにより、ボタンのような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>
お役に立てれば :]
このクラスを使用します。button
上のクラスを使用して適用すると、リンクはボタンと同じように見えますa
タグの。
または
.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;
}
私はasp:Button
:
<asp:Button runat="server"
OnClientClick="return location='targetPage', true;"
UseSubmitBehavior="False"
Text="Button Text Here"
/>
このように、ボタンの操作は完全にクライアント側で行われ、ボタンはへのリンクのように機能しますtargetPage
。
asp:Button
実際にどのように見えるかを示す良い仕事なので、他のユーザーを助けることができます!
.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>
以下のスニペットを使用してください。
.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);
}
}
}
シンプルなボタン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>
これでうまくいきました。ボタンのように見え、リンクのように動作します。たとえばブックマークできます。
<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>
どのように使用する方法についてASP:LinkButtonコントロールを?