Как сделать html-ссылку похожей на кнопку?
Я использую ASP.NET некоторые из моих кнопок просто перенаправляют. Я бы предпочел, чтобы это были обычные ссылки, но я не хочу, чтобы мои пользователи заметили большую разницу во внешнем виде. Я рассматривал изображения, обернутые якорями, то есть тегами, но я не хочу запускать редактор изображений каждый раз, когда я изменяю текст на кнопке.
18 ответов
применить этот класс к этому
.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>
Как глупо, как я думаю, это я собираюсь опубликовать этот древний вопрос.
почему бы просто не обернуть якорный тег вокруг элемента button.
<a href="somepage.html"><button type="button">Text of Some Page</button></a>
прочитав этот пост и попробовав принятый ответ без желаемого результата, который я искал, я попробовал выше и получил именно то, что хотел.
Примечание
Это будет работать только для IE9+, Chrome, Safari, Firefox и, вероятно, Opera.
ИМХО, лучшее и более элегантное решение. Если ваша ссылка такова:
<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, поэтому он будет работать во всех браузерах ничего не меняя. Кроме того, если у вас есть стили для ваших кнопок, это решение будет применять те же стили к вашей новой кнопке бесплатно.
a {
display: block;
height: 20px;
width: auto;
border: 1px solid #000;
}
Вы можете играть с <a>
теги, как это, если вы даете им заблокировать дисплей. Вы можете настроить границу, чтобы дать оттенок, как эффект и цвет фона для этой кнопки чувствовать :)
технология CSS3 appearance
свойство предоставляет простой способ стилизовать любой элемент (включая якорь) со встроенным браузером <button>
стили:
a.btn {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
<body>
<a class="btn">CSS Button</a>
</body>
в CSS уловок, которые имеет хороший план с более подробной информацией об этом. имейте в виду, что ни одна версия Internet Explorer в настоящее время не поддерживает это согласно caniuse.com.
Если вам нужна хорошая кнопка с закругленными углами, используйте этот класс:
.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>
Как сказал TStamper, вы можете просто применить к нему класс CSS и спроектировать его таким образом. Поскольку CSS улучшает количество вещей, которые вы можете сделать со ссылками, стало экстраординарным, и теперь есть дизайнерские группы, которые просто фокусируются на создании потрясающих кнопок CSS Для тем и так далее.
например, вы можете переходы с фоновым цветом, используя свойство-webkit-transition и pseduo-классы. Некоторые из этих конструкций могут получить довольно nutty, но оно обеспечивает a фантастическая альтернатива тому, что в прошлом могло быть сделано, скажем, с flash.
например (на мой взгляд, это умопомрачительные), http://tympanus.net/Development/CreativeButtons/ (это серия полностью готовых анимаций для кнопок с исходным кодом на исходной странице). http://www.commentredirect.com/make-awesome-flat-buttons-css/ (по тем же линиям эти кнопки имеют приятный, но минималистичный переход эффектов, и они используют новый "плоский" стиль дизайна.)
вы можете создать стандартную кнопку, а затем использовать его в качестве фонового изображения для ссылки. Затем вы можете установить текст в ссылке без изменения изображения.
лучшие решения, если у вас нет специальной кнопки визуализации, - это два уже данных TStamper и Ólafur Waage.
Это попадает в детали css немного больше, и дает вам некоторые изображения:
http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/
много запоздалый ответ:
я боролся с этим время от времени, так как я впервые начал работать в ASP. Вот лучшее, что я придумал:
концепция: Я создаю пользовательский элемент управления с тегом. Затем в кнопку я помещаю событие onclick, которое устанавливает документ.расположение до нужного значения с помощью JavaScript.
Я вызвал элемент управления 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
преимущества этой схемы: она выглядит как элемент управления. Вы пишете один тег для него,
результирующая кнопка является" реальной " HTML-кнопкой и поэтому выглядит как настоящая кнопка. Вам не нужно пытаться имитировать внешний вид кнопки с помощью CSS, а затем бороться с разными взглядами в разных браузерах.
пока способности ограничены, вы можете легко расширить его, добавив больше свойств. Вероятно, большинство свойств просто должны были бы "пройти через" к базовой кнопке, как я сделал для text, enabled и cssclass.
Если у кого-то есть более простое, чистое или иное лучшее решение, я был бы рад услышать это. Это боль, но это работает.
вы можете сделать это с помощью JavaScript:
- получить стили CSS реальной кнопки с
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>
использовать этот класс. Это сделает вашу ссылку выглядеть так же, как кнопка при применении с помощью 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;
}
как насчет использования asp: LinkButton?
вы можете это сделать - я сделал кнопку linkbutton похожей на стандартную кнопку, используя запись TStamper. Подчеркивание показалось под текстом, когда я завис, несмотря на text-decoration: none
настройка.
я смог остановить наведение курсора, добавив style="text-decoration: none"
в linkbutton:
<asp:LinkButton
id="btnUpdate"
CssClass="btnStyleTStamper"
style="text-decoration: none"
Text="Update Items"
Onclick="UpdateGrid"
runat="server"
/>
это то, что я использовал. Кнопка ссылка
<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:Button
:
<asp:Button runat="server"
OnClientClick="return location='targetPage', true;"
UseSubmitBehavior="False"
Text="Button Text Here"
/>
таким образом, работа кнопки полностью на стороне клиента, и кнопка действует так же, как ссылка на targetPage
.
это сработало для меня. Он выглядит как кнопка и ведет себя как ссылка. Вы можете пометить его, например.
<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>
.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>