Düğmenin bir bağlantı gibi görünmesi nasıl sağlanır?

Bir düğmeyi CSS kullanarak bir bağlantıya benzetmem gerekiyor. Değişiklikler yapılıyor ama üzerine tıkladığımda, sanki bir düğmeye basıyormuş gibi gösteriyor. Düğmenin tıklandığında bile bağlantı olarak çalışması için bunu nasıl kaldıracağınız hakkında bir fikriniz var mı?

Kabul edilen cevabın kodu çoğu durumda çalışır, ancak gerçekten bir bağlantı gibi davranan bir düğme almak için biraz daha fazla koda ihtiyacınız vardır. Firefox'ta (Mozilla) odaklanmış düğmelerin stilini elde etmek özellikle zor.

Aşağıdaki CSS, bağlantıların ve düğmelerin aynı CSS özelliklerine sahip olmasını ve tüm yaygın tarayıcılarda aynı şekilde davranmasını sağlar:

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

Yukarıdaki örnek yalnızca değiştiriliyor button okunabilirliği geliştirmek için öğeleri , ancak değiştirmek input[type="button"], input[type="submit"]ve input[type="reset"]öğeler de kolayca genişletilebilir . Sadece belirli düğmelerin çapa gibi görünmesini istiyorsanız, bir sınıf da kullanabilirsiniz.

Görmek Canlı bir demo için bu JSFiddle'a .

Bunun düğmelere varsayılan bağlantı stilini uyguladığını da unutmayın (örn. Mavi metin rengi). Dolayısıyla, metin rengini veya çapa ve düğmelerin başka bir şeyini değiştirmek istiyorsanız, bunu yapmalısınız. yukarıdaki CSS'den sonra .

Bu yanıttaki orijinal kod (snippet'e bakın) tamamen farklı ve eksikti.

/* 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 kullanmak sakıncası yoksa sadece link sınıfını kullanmanızı öneririm .

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

Umarım bu birine yardımcı olur :) İyi günler!

css sahte camını kullanmayı dene :focus

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

bağlantılar ve onclick olayları kullanımı için düzenleme (satır içi javascript eventhandlers kullanmamalısınız, ancak basitlik uğruna bunları burada kullanacağım):

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

this.href ile fonksiyonunuzdaki bağlantının hedefine bile erişebilirsiniz. return falsetıklandığında tarayıcıların bağlantıyı izlemesini engeller.

javascript devre dışı bırakılmışsa, bağlantı normal bir bağlantı olarak çalışır ve yüklenir some/page.php- js devre dışı bırakıldığında bağlantınızın ölmesini istiyorsanızhref="#"

Düğmeleri tarayıcılar arasında güvenilir bir şekilde bağlantı olarak biçimlendiremezsiniz. Denedim, ancak bazı tarayıcılarda her zaman garip dolgu, kenar boşluğu veya yazı tipi sorunları var. Ya düğmenin bir düğme gibi görünmesine izin vererek yaşayın ya da bir bağlantıda onClick ve preventDefault kullanın.

Bunu, aşağıdaki örnekte gösterildiği gibi basit css kullanarak yapabilirsiniz.

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>