Jak sprawić, by przycisk wyglądał jak link?

Muszę sprawić, aby przycisk wyglądał jak link przy użyciu CSS. Zmiany zostały wprowadzone, ale kiedy je kliknę, pokazuje to tak, jakby zostało wciśnięte jak w przycisku. Masz pomysł, jak to usunąć, aby przycisk działał jak link nawet po kliknięciu?

Kod akceptowanej odpowiedzi działa w większości przypadków, ale aby uzyskać przycisk, który naprawdę zachowuje się jak link, potrzebujesz trochę więcej kodu. Szczególnie trudne jest uzyskanie stylu skoncentrowanych przycisków bezpośrednio w przeglądarce Firefox (Mozilla).

Poniższy CSS zapewnia, że ​​kotwice i przyciski mają te same właściwości CSS i zachowują się tak samo we wszystkich popularnych przeglądarkach:

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

Powyższy przykład modyfikuje tylko buttonelementy, aby poprawić czytelność, ale można go łatwo rozszerzyć również o modyfikację input[type="button"], input[type="submit"]i input[type="reset"]elementy. Możesz także użyć klasy, jeśli chcesz, aby tylko niektóre przyciski wyglądały jak kotwice.

Zobacz JSFiddle, aby zobaczyć demo na żywo.

Należy również pamiętać, że dotyczy to domyślnego stylu zakotwiczenia przycisków (np. Niebieski kolor tekstu). Więc jeśli chcesz zmienić kolor tekstu lub cokolwiek innego z kotwic i przycisków, powinieneś to zrobić po CSS powyżej.

Oryginalny kod (patrz fragment kodu) w tej odpowiedzi był zupełnie inny i niekompletny.

/* 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;
}

Jeśli nie masz nic przeciwko użyciu bootstrapu na Twitterze , sugeruję po prostu użyć klasy link .

<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>

Mam nadzieję, że to komuś pomoże :) Miłego dnia!

spróbuj użyć pseudoklasy css :focus

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

edytuj jak dla linków i wykorzystania zdarzeń onclick (nie powinieneś używać wbudowanych modułów obsługi zdarzeń javascript, ale dla uproszczenia użyję ich tutaj):

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

Dzięki this.href możesz nawet uzyskać dostęp do celu łącza w swojej funkcji. return falsepo prostu uniemożliwi przeglądarkom klikanie linku.

jeśli javascript jest wyłączony, link będzie działał jak normalny link i po prostu się załaduje - some/page.phpjeśli chcesz, aby twój link był martwy, gdy js jest wyłączony, użyjhref="#"

Nie można stylowo określać przycisków jako linków w różnych przeglądarkach. Próbowałem, ale w niektórych przeglądarkach zawsze występują dziwne problemy z dopełnianiem, marginesami lub czcionkami. Albo na żywo, aby przycisk wyglądał jak przycisk, lub użyj onClick i zapobiegnij domyślnemu ustawieniu łącza.

Możesz to osiągnąć za pomocą prostego css, jak pokazano w poniższym przykładzie

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>