Пользователи должны знать по внешнему виду веб-интерфейса, каково его поведение ... поэтому внешний вид кнопки не должен использоваться в качестве ссылки, а внешний вид ссылки не должен использоваться в качестве кнопки для.
Antagonist
2
Обычно для кнопки требуется более одного изображения: стандартное, зависшее, нажатое, активное. В противном случае это будет неестественно.
user123444555621 02
Я предлагаю вам также добавить cursor: pointer;css, чтобы курсор выглядел так, как будто он соединяет руку с указательным пальцем, так как это также происходит с обычной кнопкой и является полезным подспорьем для пользователя.
Это работает для меня, только если я применяю его к aтегу напрямую ( a {display: block ...}), что недопустимо. Вы хоть представляете, почему classатрибут внутри aтега не работает? :( Я использую Firefox 27. Я тоже пробовал, a.button {...}но тоже не работает.
just_a_girl
4
если вы используете начальную загрузку, вы можете выполнить <a class="btn btn-info"> </a> и использовать существующие стили начальной загрузки и избежать определения нового стиля.
stcorbett
если ваша кнопка подчеркнута, добавьтеtext-decoration:none
Rohit
99
Проверьте документацию Bootstrap . Класс .btnсуществует и работает с aтегом, но вам нужно добавить определенный .btn-*класс с .btnклассом.
Если вы хотите избежать жесткого кодирования определенного дизайна с помощью CSS, а полагаться на кнопку браузера по умолчанию, вы можете использовать следующий CSS.
Информацию о текущем состоянии поддержки браузером см. На caniuse.com/#feat=css-appearance ; обратите внимание, что браузер может отображаться appearance: buttonне так, как обычная кнопка (по крайней мере, когда я только что проверил Chrome 78).
СОЛО
это именно то, что я искал, но он специально не работает <a>в хроме. Протестировал, <span>и он работал нормально.
Hashbrown
4
Ни один из других ответов не показывает код, в котором кнопка ссылки меняет свой внешний вид при наведении курсора.
Конечно, вы можете изменить приведенный выше пример по своему усмотрению. Важно, чтобы он отображался как блок ( display:block) или встроенный блок ( display:inline-block).
вы должны сохранить display: inline; и вместо использования высоты и ширины вы должны использовать отступы и высоту строки для регулировки размера якоря
Antagonist
@Antagonist: Поскольку OP хочет изображение в качестве фона, и он, скорее всего, всегда будет использовать то же самое, я не понимаю, почему он не должен использовать определенную высоту и ширину этого изображения. Но я думаю, ОП попробует все предложенные решения и выберет то, что ему больше всего подходит.
r0skar 02
Я говорю, что использовать другие свойства css для достижения того же самого и сохранить исходное свойство display как встроенное ...
Antagonist
1
Для базового HTML вы можете просто добавить тег img с src, установленным для URL вашего изображения внутри HREF (A)
Используйте специфичные для платформы теги и используйте их на всем веб-сайте.
Используйте JavaScript для имитации ссылки на элементе кнопки, а затем сделайте так, чтобы кнопка соответствовала внешнему виду кнопок браузера. Эти хаки с использованием кнопок css никогда не будут точными.
Я делал это в прошлых проектах, и IE отказывается вести себя. Я протестировал этот код, но хотел бы высказать озабоченность, требующую дополнительного обоснования.
MEM
0
для тех, у кого есть проблемы после добавления active и focus, укажите имя класса или идентификатора для вашей кнопки и добавьте его в css
Добро пожаловать в StackOverflow! Пожалуйста, включите весь соответствующий код в свой пост, а не просто ссылку на внешний веб-сайт. Ссылки хороши для получения дополнительной информации , но ваш пост должен стоять отдельно от любого другого ресурса - ссылки могут измениться или стать «мертвыми». Товарищи-программисты смогут решить проблему, описанную в вопросе, прямо из вашего ответа.
cursor: pointer;
css, чтобы курсор выглядел так, как будто он соединяет руку с указательным пальцем, так как это также происходит с обычной кнопкой и является полезным подспорьем для пользователя.Ответы:
Используя CSS:
http://jsfiddle.net/GCwQu/
источник
a
тегу напрямую (a {display: block ...}
), что недопустимо. Вы хоть представляете, почемуclass
атрибут внутриa
тега не работает? :( Я использую Firefox 27. Я тоже пробовал,a.button {...}
но тоже не работает.text-decoration:none
Проверьте документацию Bootstrap . Класс
.btn
существует и работает сa
тегом, но вам нужно добавить определенный.btn-*
класс с.btn
классом.например:
<a class="btn btn-info"></a>
источник
вы можете легко обернуть кнопку такой ссылкой
<a href="#"> <button>my button </button> </a>
источник
Примерно так будет напоминать кнопку:
См. Пример http://jsfiddle.net/r7v5c/1/ .
источник
Попробуй это:
Вы можете использовать
href
строку тега оттуда.источник
Если вы хотите избежать жесткого кодирования определенного дизайна с помощью CSS, а полагаться на кнопку браузера по умолчанию, вы можете использовать следующий CSS.
Обратите внимание, что это, вероятно, не будет работать в IE.
источник
appearance: button
не так, как обычная кнопка (по крайней мере, когда я только что проверил Chrome 78).<a>
в хроме. Протестировал,<span>
и он работал нормально.Ни один из других ответов не показывает код, в котором кнопка ссылки меняет свой внешний вид при наведении курсора.
Вот что я сделал, чтобы это исправить:
HTML:
CSS:
JSFiddle: https://jsfiddle.net/adamovic/ovu3k0cj/
источник
background-image
свойство CSS в<a>
тегеdisplay:block
и настроитьwidth
иheight
в CSSЭто должно помочь.
источник
Да, ты можешь это сделать.
Вот пример:
Конечно, вы можете изменить приведенный выше пример по своему усмотрению. Важно, чтобы он отображался как блок (
display:block
) или встроенный блок (display:inline-block
).источник
Для базового HTML вы можете просто добавить тег img с src, установленным для URL вашего изображения внутри HREF (A)
источник
Вы можете создать класс для якорных элементов, которые вы хотите отображать как кнопки.
Например:
Использование изображения:
или используя чистый подход CSS:
Всегда не забывайте скрывать текст чем-то вроде:
Отличная галерея кнопок на чистом CSS здесь, и вы даже можете использовать генератор кнопок css3.
Множество стилей и варианты здесь
удачи
источник
У вас есть два варианта согласованности.
.
return false;
состоит в том, чтобы предотвратить нажатие кнопки по умолчанию.источник
Просто возьмите обычный дизайн кнопок css и примените этот CSS к ссылке (точно так же, как и к кнопке).
Пример:
источник
для тех, у кого есть проблемы после добавления active и focus, укажите имя класса или идентификатора для вашей кнопки и добавьте его в css
например
// html-код
// код css
источник
Протестировано с Chromium 40 и Firefox 36
источник
Попробуйте этот код:
Посмотрите это (он объяснит, как это сделать) - https://youtu.be/euti4HAJJfk
источник
Вот так просто:
Просто добавьте кнопку "class =" btn btn-success "& role =
источник
class="btn btn-success"
это класс начальной загрузки.