Як зробити так, щоб HTML-посилання виглядало як кнопка?

154

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

css button

— Метью Мартін
джерело

2

Дивіться відповідь я прийняв на це питання: stackoverflow.com/questions/547222 / ...

— tvanfosson

Ви можете використовувати таку послугу, як ця, щоб створити для вас CSS після налаштування кількох аспектів (колір, розмір, шрифт).

— Василь Бурк

1

Я відповів би, як це зробити з javascript, але питання не має тегу "javascript"

— ilyaigpetrov

2

@ilyaigpetrov йти вперед і опублікувати відповідь. Я запитав це питання 7 років тому, і, схоже, це поширена проблема, і люди потребують різноманітних рішень.

— MatthewMartin

214

Застосуйте до нього цей клас

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

Розгорніть фрагмент

— TStamper
джерело

13

Завдяки цьому полягає в тому, що він вимагає відтворити вигляд кнопки за допомогою CSS. Але, на жаль, кнопки в різних браузерах та різних версіях браузерів виглядають по-різному. Тож вам або доведеться визнати, що це виглядає смішно в деяких браузерах, або мати купу коду, щоб зрозуміти, який браузер і яку версію має користувач, і вибрати інший стиль. Це багато клопоту, який може зламати наступного разу, коли з’явиться нова версія браузера.

— Джей

Це працює лише для мене, якщо я застосую його до aтега безпосередньо ( a {display: block ...}), що не прийнятно. Чи маєте ви уявлення, чому classатрибут всередині aтегу не працюватиме? :( я використовую Firefox 27. Я також спробував, a.button {...}і він не працює.

— just_a_girl

1

@ Джей компромісом може бути визначення стилів <input type="submit">та / або <button>елементів, щоб вони не використовували налаштування браузера (де це можливо), а потім співставляти їх із стилем, .buttonяк зазначено вище. Це повинно допомогти зменшити відмінності, якщо не видалити їх повністю, і краще, ніж ваш (ненадійний - як ви правильно говорите) метод нюхання типу та версії браузера.

— Оллі Беннетт

@OllieBennett Щоправда: Ви можете повністю змінити вигляд кнопки. Я не намагався цього робити, не знаючи, скільки аспектів стилю ви маєте переосмислити. Здається, що біль, але не випробувавши її, я не можу сказати, наскільки біль у порівнянні з іншими варіантами.

— Jay

@CraigGjerdingen Мені дуже подобаються стилі, які ви використовували для .link_button. Використання CSS3 безумовно актуалізує цю відповідь. Також використання стилів, менш схожих на "звичайні" кнопки браузера, але все ще мають доступність кнопок, вирішує проблему нюху браузера, без (imo) також необхідності переглядати стилі для<input type="submit">

— Еван Донован

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, він не матиме вбудованого стилю. Хтось ще мав таку відповідь.

— guanome

1

Мені подобається це рішення, тому що вам не доведеться поспішати з CSS, намагаючись наслідувати стиль кнопки рідного браузера. Однак у Firefox я працював лише з ним <button type="button">. Без атрибуту type, він завжди робив би поштовий відкат і ігнорував посилання.

— Тобіас

@Pyitoechito Я впевнений, що це станеться, оскільки Chrome і Safari перебувають у веб-програмі. Схоже, це буде 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. Веб-форми ASP.NET загортають всю сторінку в тег форми, а вкладені форми, схоже, взагалі не функціонують - вона працює поза тегом форми ASP.NET, але це обмежує використання посилань у самому верху та знизу.

— MatthewMartin

3

Простий і ефективний. Ви можете додати елемент відображення: inline в елемент форми. В іншому випадку це трактується як блок, який відрізняється від кнопки / якоря / входу.

— nimrodm

Гарне питання. Я теж не думаю. Але інші зображені тут рішення не працюватимуть з googlebot, наприклад, із використанням тегів кнопок.

— Рауль Луна,

Я спробував це в Django, але, як кнопка закінчується в іншій формі, вона розміщує дані, а не виступає як посилання.

— wobbily_col

1

ви також можете змусити кнопку зробити переадресацію в JavaScript. але тепер це не посилання - не може «копіювати адресу посилання в буфер обміну», середній клік , щоб відкрити в новій вкладці і т.д., переглянути мету посилання при наведенні на нього мишею і т.д.

— Олександр Тейлором

27

appearanceВластивість CSS3 забезпечує простий спосіб стилізації будь-якого елемента (включаючи якір) за допомогою вбудованих <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 .

— Кевін Лірі
джерело

5

Це було знято із специфікації CSS3. htmlvalidator.com/help.php?m=1&h=appearance

— user1431356

22

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

Ви можете грати з <a>такими тегами, якщо ви надаєте їм блок відображення. Ви можете налаштувати рамку, щоб надати ефект відтінку та колір фону для цієї кнопки :)

— Flafur Waage
джерело

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

3

Як сказав TStamper, ви можете просто застосувати до нього клас CSS і спроектувати його таким чином. Оскільки CSS покращує кількість речей, які можна зробити із посиланнями, стає надзвичайним, і зараз існують дизайнерські групи, які зосереджуються лише на створенні дивовижних на вигляд CSS кнопок для тем тощо.

Наприклад, ви можете переходити з фоновим кольором, використовуючи властивість -webkit-перехід та pseduo-класи. Деякі з цих конструкцій можуть отримати досить горіховий склад, але це дає фантастичну альтернативу тому, що, можливо, раніше було зроблено, скажімо, спалахом.

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

— гремебой
джерело

3

Ви можете зробити це за допомогою 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>

Розгорніть фрагмент

— ільяігпетров
джерело

2

Ви можете створити стандартну кнопку, а потім використовувати її як фонове зображення для посилання. Потім ви можете встановити текст у посиланні, не змінюючи зображення.

Найкращі рішення, якщо ви не маєте спеціальної відредагованої кнопки, - це два, які вже надали TStamper та flafur Waage.

— cjk
джерело

2

Це також детальніше потрапляє у деталі css та дає вам декілька зображень:

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

— ГБа
джерело

2

Сильно запізніла відповідь:

Я боровся з цим і вимикався з мого початку роботи в 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, а потім боротися з різними виглядами в різних браузерах.

Хоча здібності обмежені, ви можете легко розширити їх, додавши більше властивостей. Цілком ймовірно, що більшості властивостей просто доведеться "пропустити" до основної кнопки, як я це робив для тексту, включеного та 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;
}

— Ендрю Хауден
джерело

Хоча це не дуже схоже на кнопку. Я не знаю, хто тебе порушив. Ось загадка

— MatthewMartin

2

Як щодо використання 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"
/>

— Християнин
джерело

Linkbutton створює щось, схоже на посилання, але діє як кнопка. Питання вимагає зворотного: щось схоже на кнопку, але діє як посилання.

— Джей

2

Використовуючи властивості рамки, кольору та кольору фону, ви можете створити HTML-посилання на формат lookalike!

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>

— codeuix
джерело

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

— Андрій Адаменко
джерело

-1

Як щодо використання asp: LinkButton ?

— Володимир Кочанчич
джерело

Кнопка посилання, незважаючи на назву, виглядає точно як посилання. w3schools.com/aspnet/showasp.asp?filename=demo_linkbutton

— MatthewMartin