Как сделать ссылку HTML похожей на кнопку? - PullRequest
Новая
       95

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

137 голосов
/ 02 апреля 2009

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

Ответы [ 21 ]

196 голосов
/ 02 апреля 2009

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

.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>
118 голосов
/ 25 февраля 2011

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

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

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

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

Примечание

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

33 голосов
/ 06 октября 2012

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

<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-элементы, поэтому он будет работать во всех браузерах без каких-либо изменений. Более того, если у вас есть стили для ваших кнопок, это решение будет применять те же стили к вашей новой кнопке бесплатно.

22 голосов
/ 26 февраля 2016

Свойство CSS3 appearance предоставляет простой способ стилизации любого элемента (включая привязку) с помощью встроенных в браузер стилей <button>: 

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

CSS Tricks имеет хороший план с более подробной информацией об этом. Имейте в виду, что ни одна версия Internet Explorer в настоящее время не поддерживает этот в соответствии с caniuse.com .

20 голосов
/ 02 апреля 2009 
a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

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

17 голосов
/ 03 декабря 2013

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

.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 голосов
/ 11 сентября 2013

Как сказал 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 голосов
/ 06 декабря 2016

Вы можете сделать это с помощью 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 голосов
/ 28 февраля 2013

Как насчет использования 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 голосов
/ 02 апреля 2009

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...