Как сделать кнопку выглядеть как ссылка?

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

Если вы не возражаете против использования Твиттер бутстрап Я предлагаю вам просто использовать ссылка класс.

<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 eventhandlers, но для простоты я буду использовать их здесь):

<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 и 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;
}

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