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

Мне нужно, чтобы кнопка выглядела как ссылка, используя CSS. Изменения сделаны, но когда я нажимаю на него, он показывает, как будто он нажат как кнопка. Любая идея, как удалить это, чтобы кнопка работала как ссылка даже при нажатии?

HTML

  

CSS

 button { background:none!important; color:inherit; border:none; padding:0!important; font: inherit; /*border is optional*/ border-bottom:1px solid #444; cursor: pointer; } 

См. Демонстрацию (на JSfiddle)

Код принятого ответа работает в большинстве случаев, но чтобы получить кнопку, которая действительно ведет себя как ссылка, вам нужно немного больше кода. Особенно сложно получить стиль сфокусированных кнопок прямо на Firefox (Mozilla).

Следующий CSS гарантирует, что привязки и кнопки имеют одинаковые свойства CSS и ведут себя одинаково во всех распространенных браузерах:

 button { align-items: normal; background-color: rgba(0,0,0,0); border-color: rgb(0, 0, 238); border-style: none; box-sizing: content-box; color: rgb(0, 0, 238); cursor: pointer; display: inline; font: inherit; height: auto; padding: 0; perspective-origin: 0 0; text-align: start; text-decoration: underline; transform-origin: 0 0; width: auto; -moz-appearance: none; -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height */ -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */ } /* Mozilla uses a pseudo-element to show focus on buttons, */ /* but anchors are highlighted via the focus pseudo-class. */ @supports (-moz-appearance:none) { /* Mozilla-only */ button::-moz-focus-inner { /* reset any predefined properties */ border: none; padding: 0; } button:focus { /* add outline to focus pseudo-class */ outline-style: dotted; outline-width: 1px; } } 

Приведенный выше пример только изменяет элементы button для улучшения читаемости, но его можно легко расширить, чтобы изменить input[type="button"], input[type="submit"] и input[type="reset"] элементы input[type="reset"] . Вы также можете использовать class, если хотите, чтобы только определенные кнопки выглядели якорями.

Посмотрите этот JSFiddle для живой демонстрации.

Также обратите внимание, что это относится к стилю привязки по умолчанию к кнопкам (например, синий текст-цвет). Поэтому, если вы хотите изменить текстовый цвет или что-то еще из привязок и кнопок, вы должны сделать это после CSS выше.


Исходный код (см. Фрагмент) в этом ответе был совершенно другим и неполным.

 /* Obsolete code! Please use the code of the updated answer. */ input[type="button"], input[type="button"]:focus, input[type="button"]:active, button, button:focus, button:active { /* Remove all decorations to look like normal text */ background: none; border: none; display: inline; font: inherit; margin: 0; padding: 0; outline: none; outline-offset: 0; /* Additional styles to look like a link */ color: blue; cursor: pointer; text-decoration: underline; } /* Remove extra space inside buttons in Firefox */ input[type="button"]::-moz-focus-inner, button::-moz-focus-inner { border: none; padding: 0; } 

Если вы не против использования twitter bootstrap, я предлагаю вам просто использовать class ссылок .

   

попробуйте использовать псевдоссласт css :focus

 input[type="button"], input[type="button"]:focus { /* your style goes here */ } 

как для ссылок и использования событий onclick (вы не должны использовать встроенные javascript-обработчики событий, но для простоты я буду использовать их здесь):

 watch and learn 

с this.href вы даже можете получить доступ к цели ссылки в вашей функции. return false будет просто препятствовать браузерам следовать ссылке при нажатии.

если javascript отключен, ссылка будет работать как обычная ссылка и просто загрузить https://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link/some/page.php если вы хотите, чтобы ваша ссылка была мертва, когда js отключен, используйте href="#"

Вы не можете стилизовать кнопки как надежные ссылки во всех браузерах. Я пробовал, но в некоторых браузерах всегда есть странные проблемы с заполнением, маржи или шрифтом. Либо жить, когда кнопка будет выглядеть как кнопка, либо использовать onClick и preventDefault для ссылки.

Вы можете достичь этого, используя простой css, как показано ниже.

 button { overflow: visible; width: auto; } button.link { font-family: "Verdana" sans-serif; font-size: 1em; text-align: left; color: blue; background: none; margin: 0; padding: 0; border: none; cursor: pointer; -moz-user-select: text; /* override all your button styles here if there are any others */ } button.link span { text-decoration: underline; } button.link:hover span, button.link:focus span { color: black; } 
  
  • Вызов кнопки Capture на Android
  • Как работает свойство WPF Button.IsCancel?
  • Как создать пользовательскую кнопку формы с селектором в android?
  • Динамически добавлять несколько кнопок в окно wpf?
  • Событие триггера, когда кнопка нажата в Android
  • Как отключить кнопку Android?
  • Изображение в WPF-кнопке не отображается в режиме Runtime
  • Динамическая кнопка asp.net с обработчиком событий
  • Как изменить цвет фона кнопки WinAPI C ++
  • Как добавить к моему андроидному приложению кнопку, чем нравится на странице facebook?
  • Создание динамической кнопки и размещение их в предопределенном порядке с использованием c #
  • Interesting Posts

    Формула Excel, чтобы изменить цвет фона ячейки, но сохранить ее текущее значение?

    Как извлечь текст, который находится между круглыми скобками (круглые скобки)?

    Разница между chmod 777 и chmod 007

    Как разрезать ненужные видеоролики и присоединить остальные к одному видео с помощью FFmpeg?

    Доступ к сеансу с использованием веб-API ASP.NET

    Зачем мне нужно несколько символов EOF (CTRL + Z)?

    Есть ли способ остановить Windows 7 от минимизации окна с фокусом при нажатии на элемент панели задач?

    Решение для удаленного рабочего стола без RDP (для LAN – Windows Home Premium)

    Как связать переменное количество обещаний в Q, по порядку?

    MongoDB: подсчет количества элементов в массиве

    Где в диалоговом окне «Параметры папки» вы попали в предварительный просмотр Windows 8?

    Как работает синтаксис объявления аргументов массива Java «…»?

    Почему целочисленное переполнение на x86 с GCC вызывает бесконечный цикл?

    FATAL ERROR: CALL_AND_RETRY_LAST Не удалось выполнить выделение – процесс из памяти

    Получить цвет фона кнопки в android

    Давайте будем гением компьютера.