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

Мені потрібно зробити кнопку схожою на посилання за допомогою 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 і завадятьDefault за посиланням.

Ви можете досягти цього, використовуючи простий 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>