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

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

Код принятого ответа работает в большинстве случаев, но чтобы получить кнопку, которая действительно ведет себя как ссылка, вам нужно немного больше кода. Особенно сложно сделать стилизацию сфокусированных кнопок прямо на 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"]элементы. Вы также можете использовать класс, если хотите, чтобы только определенные кнопки выглядели как якоря.

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>

Надеюсь, это кому-нибудь поможет :) Хорошего дня!

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

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

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

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

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

если отключено Javascript ссылка будет работать как обычная ссылка и просто загрузить some/page.php-ела вы хотите , чтобы ваша ссылка будет мертва , когда JS отключено использованиеhref="#"

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

Вы можете добиться этого с помощью простого 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;
}

<button type="submit" class="link"><span>Button as Link</span></button>