21 Вопрос: Как сделать ссылку HTML похожей на кнопку?

вопрос создан в Thu, Jun 28, 2012 12:00 AM

Я использую ASP.NET, некоторые из моих кнопок просто перенаправляют. Я бы предпочел, чтобы они были обычными ссылками, но я не хочу, чтобы мои пользователи замечали большую разницу во внешнем виде. Я рассматривал изображения, обернутые якорями, т. Е. Тегами, но мне не нужно запускать редактор изображений каждый раз, когда я меняю текст на кнопке.

    
137
  1. Просмотрите ответ, который я принял на этот вопрос: stackoverflow.com/questions/547222/…
    2009-04-02 15: 15: 54Z
  2. Вы можете использовать этот сервис, например этот для создания CSS для вас после настройки нескольких аспектов (цвет, размер, шрифт).
    2014-12-29 22: 04: 26Z
  3. Я бы ответил, как это сделать с помощью javascript, но у вопроса нет тега "javascript"
    2016-12-04 12: 30: 26Z
  4. @ ilyaigpetrov и отправьте ответ. Я задал этот вопрос 7 лет назад, и похоже, что это общая проблема, и людям нужны были разные решения.
    2016-12-06 00: 03: 11Z
21 ответ                              21                         

Примените этот класс к нему

р>

.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
2017-01-16 16: 11: 07Z
  1. Подвох заключается в том, что требуется, чтобы вы воспроизвели внешний вид кнопки с помощью CSS. Но, к сожалению, кнопки в разных браузерах и разных версиях браузеров выглядят по-разному. Таким образом, вы либо должны признать, что это выглядит забавно в некоторых браузерах, либо иметь кучу кода, чтобы выяснить, какой браузер и какую версию имеет пользователь, и выбрать другой стиль. Это доставляет много хлопот и может сломаться в следующий раз, когда выйдет новая версия браузера.
    2013-12-15 03: 23: 54Z
  2. Это работает только для меня, если я применяю его непосредственно к тегу a (a {display: block ...}), что недопустимо. Есть ли у вас идеи, почему атрибут class внутри тега a не будет работать? :( Я использую Firefox 27. Я также пробовал a.button {...}, и он тоже не работает.
    2014-02-26 00: 52: 56Z
  3. @ Jay может быть компромиссом для определения стиля элементов <input type="submit"> и /или <button>, чтобы они не использовали настройки браузера по умолчанию (где это возможно), а затем сопоставить они со стилем .button, как указано выше. Это должно помочь уменьшить различия, если не удалить их полностью, и лучше, чем ваш (ненадежный, как вы правильно сказали) метод определения типа и версии браузера.
    2014-03-14 11: 52: 49Z
  4. @ OllieBennett True: вы можете полностью переопределить внешний вид кнопки. Я не пытался сделать это, не уверен, сколько аспектов стиля вы должны переопределить. Звучит как боль, но, не попробовав ее, я не могу сказать, какая боль по сравнению с другими вариантами.
    2014-03-24 20: 02: 42Z
  5. Вот jsFiddle, который вы можете испортитьс jsfiddle.net/5z6ew1m0/6
    2014-09-05 19: 15: 10Z

Как бы глупо я ни думал, я собираюсь опубликовать этот древний вопрос.

Почему бы просто не обернуть тег привязки вокруг элемента кнопки.

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

Прочитав этот пост и попробовав принятый ответ без желаемого результата, который я искал, я попробовал описанное выше и получил именно то, что хотел.

Примечание

Это будет работать только для IE9 +, Chrome, Safari, Firefox и, возможно, Opera.

    
119
2013-07-19 12: 14: 25Z
  1. если бы нам не пришлось обслуживать ie8 ...
    2012-06-12 01: 39: 34Z
  2. @ Dean_Wilson попробуйте обработать ie6: (
    2012-06-28 05: 25: 12Z
  3. Мне нравится это решение, так как вам не нужно возиться с CSS, пытаясь имитировать стиль кнопок нативного браузера. Однако в Firefox я работал только с <button type="button">. Без атрибута type он всегда делал бы обратную передачу и игнорировал ссылку.
    2012-11-29 10: 07: 58Z
  4. Вложение < button > и < a > не является допустимым HTML и имеет неопределенное поведение. Подробный ответ см. Здесь stackoverflow.com/questions/6393827/… Если это работает, это просто совпадение.
    2013-12-22 22: 18: 14Z
  5. Кажется, к сожалению, не работает в IE11.
    2014-10-15 22: 39: 28Z

ИМХО, есть лучшее и более элегантное решение. Если ваша ссылка такая:

<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
2014-07-21 11: 28: 34Z
  1. Хорошо, сегодня я это проверил ... и ... он прекрасно работает, если вы не используете веб-формы ASP.NET. Веб-формы ASP.NET оборачивают всю страницу в тег формы, и вложенные формы, кажется, не функционируют вообще - они работают вне тега формы ASP.NET, но это ограничивает использование ссылками сверху и снизу.
    2012-10-09 18: 24: 49Z
  2. Просто и эффективно. Возможно, вы захотите добавить display: inline стиль к элементу формы. В противном случае он рассматривается как блок, который отличается от кнопки /привязки /ввода.
    2013-03-30 18: 35: 23Z
  3. Следят ли гуглботы за этим? Я так не думаю
    2014-08-04 15: 01: 06Z
  4. Хороший вопрос. Я тоже так не думаю. Но другие решения, изображенные здесь, не будут работать с googlebot, например, использование тега кнопки.
    2014-08-06 13: 08: 00Z
  5. Я пробовал это в Django, но когда кнопка попадает в другую форму, она отправляет данные, а недействуя как ссылка.
    2015-03-19 10: 59: 43Z

Свойство 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 . р>     

22
2017-07-30 16: 58: 13Z
  1. Это было исключено из спецификации CSS3. htmlvalidator.com/help.php?m=1&h=appearance
    2018-05-08 23: 37: 02Z
a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

Вы можете поиграть с тегами <a>, например, если вы предоставите им отображение блока. Вы можете отрегулировать границу, чтобы придать эффект тени и цвет фона для этой кнопки:)

    
20
2009-04-02 15: 06: 11Z

Если вы хотите красивую кнопку со скругленными углами, используйте этот класс:

р>

.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
2017-01-16 16: 13: 34Z
  1. Я добавил это и ответ с самым высоким рангом в jsFiddle. Не стесняйтесь возиться с jsfiddle.net/5z6ew1m0/6
    2014-09-05 19: 45: 21Z
  2. Вы также можете добавить к нему margin. В противном случае, это хорошая работа.
    2017-10-09 07: 21: 48Z

Как сказал TStamper, вы можете просто применить класс CSS к нему и спроектировать его таким образом. С улучшением CSS количество вещей, которые вы можете делать со ссылками, стало необычайным, и сейчас есть группы дизайнеров, которые просто сосредоточены на создании удивительных кнопок CSS для тем и так далее.

Например, вы можете переходить с помощью background-color, используя свойство -webkit-transition и pseduo-classes. Некоторые из этих проектов могут стать довольно сумасшедшими, но они предоставляют фантастическую альтернативу тому, что в прошлом, возможно, должно было быть сделано, скажем, со вспышкой.

Например (на мой взгляд, это просто умопомрачительно), http://tympanus.net/Development/CreativeButtons/ (это серия полностью из -боксовые анимации для кнопок, с исходным кодом на исходной странице). http://www.commentredirect.com/make-awesome-flat-buttons- css / (эти же кнопки имеют приятные, но минималистичные эффекты перехода и используют новый «плоский» стиль оформления.)

    
3
2013-09-11 05: 26: 17Z

Вы можете сделать это с помощью 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>
    
3
2017-02-01 13: 58: 48Z

Вы можете создать стандартную кнопку, а затем использовать ее в качестве фонового изображения для ссылки. Затем вы можете установить текст в ссылке, не меняя изображение.

Наилучшие решения, если у вас нет специальной визуализированной кнопки, это те, которые уже были предоставлены TStamper и Ólafur Waage.

    
2
2009-04-02 15: 09: 18Z

Это также немного подробнее описывает CSS и дает вам несколько изображений:

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

2
2009-04-02 15: 10: 06Z

Очень запоздалый ответ:

Я боролся с этим с тех пор, как впервые начал работать в ASP. Вот лучшее, что я придумал:

Концепция: я создаю собственный элемент управления с тегом. Затем в кнопку я помещаю событие onclick, которое устанавливает для document.location желаемое значение с помощью 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

Преимущества этой схемы: похоже на элемент управления. Вы пишете для него один тег, < ButtonLink id = "mybutton" navigateurl = "blahblah" />

Полученная кнопка представляет собой «настоящую» кнопку HTML и выглядит как настоящая кнопка. Вам не нужно пытаться смоделировать внешний вид кнопки с помощью CSS, а затем бороться с разными взглядами в разных браузерах.

Хотя возможности ограничены, вы можете легко расширить его, добавив дополнительные свойства. Вполне вероятно, что большинству свойств придется просто «пройти» к соответствующей кнопке, как я это сделал для text, enabled и cssclass.

Если у кого-нибудь есть более простое, более чистое или иное лучшее решение, я буду рад его услышать. Это боль, но это работает.

    
2
2014-03-14 13: 51: 32Z

Используйте этот класс. Ваша ссылка будет выглядеть так же, как кнопка при применении с использованием класса button для тега a.

ЗДЕСЬ ДЕМОНСТРАЦИЯ JSFIDDLE

или

ЗДЕСЬ ДРУГОЙ ДЕМО 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
2017-07-29 07: 13: 15Z
  

Как насчет использования 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"
/>
    
2
2017-07-30 07: 12: 06Z
  1. Кнопка Link создает что-тоЭто выглядит как ссылка, но действует как кнопка. Вопрос требует обратного: нечто, похожее на кнопку, но действующее как ссылка.
    2013-12-15 03: 21: 45Z

Это то, что я использовал. Кнопка ссылки

<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
2014-08-22 05: 58: 14Z
  1. Хотя это не очень похоже на кнопку. Я не знаю, кто тебя отверг. Вот сценарий JS для предоставленного вами кода: jsfiddle.net/yajj2x0p
    2014-08-21 03: 22: 38Z
  2. Bugger. Забыли класс. Обновлен jsfiddle. jsfiddle.net/yajj2x0p/4
    2014-08-22 05: 55: 22Z

Я использую asp:Button:

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

Таким образом, работа кнопки полностью на стороне клиента, и кнопка действует как ссылка на targetPage.

    
1
2017-07-30 14: 49: 31Z
  1. Хорошая работа, показывающая, как asp:Button выглядит на практике, поэтому он может помочь другим пользователям!
    2017-07-30 14: 08: 58Z

Используя свойства border, color и background color, вы можете создать 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
2019-04-16 13: 41: 13Z

Это сработало для меня. Это похоже на кнопку и ведет себя как ссылка. Вы можете добавить его в закладки, например.

<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
2014-07-10 18: 43: 48Z

р>

.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
2017-02-28 18: 23: 43Z

Используйте приведенный ниже фрагмент.

    .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
2019-04-05 13: 39: 54Z

Простая кнопка 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
2019-04-16 14: 12: 12Z

Как насчет использования asp: LinkButton ?

    
- 1
2017-07-30 17: 35: 03Z
  1. Кнопка ссылки, несмотря на название, выглядит в точности как ссылка. w3schools.com/aspnet/showasp.asp?filename=demo_linkbutton /DIV>
    2011-08-02 21: 06: 10Z
  2. Я подумал, что это проблема здесь ...
    2011-08-08 11: 27: 41Z
источник размещен Вот