How to make button look like a link?

I need to make a button look like a link using CSS. The changes are done but when I click on it, it shows as if it's pushed as in a button. Any idea how to remove that, so that the button works as a link even when clicked?

---

HTML

<button>your button that looks like a link</button>

CSS

button {
     background:none!important;
     color:inherit;
     border:none; 
     padding:0!important;
     font: inherit;
     /*border is optional*/
     border-bottom:1px solid #444; 
     cursor: pointer;
}

See Demo (on JSfiddle)

---

The code of the accepted answer works for most cases, but to get a button that really behaves like a link you need a bit more code. Especially it is tricky to get the styling of focused buttons right on Firefox (Mozilla).

The following CSS ensures that anchors and buttons have the same CSS properties and behave the same on all browsers:

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;
  /* Mozilla specific properties */
  -moz-appearance: none;
  /* Webkit specific properties */
  -webkit-logical-height: 1em; /* should be auto, but since Chrome ignores auto, we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* ignored by Chrome, but here for completeness */
}

/* Mozilla uses a pseudo-element to show focus on buttons - we don't want that anymore */
button::-moz-focus-inner {
  border: none;
  padding: 0;
}

/* Ensure that all browsers use an outline to show focus */
button:focus {
  outline: 1px dotted;
}

The example above only modifies button elements to improve readability, but it can easily be extended to modify input[type="button"], input[type="submit"] and input[type="reset"] elements as well.

You could also use a class, if you want to make only certain buttons look like anchors. See this JSFiddle for an example.

Please also note that this applies the default anchor-styling to buttons (eg blue text-color). So if you want to change the text-color or anything else of anchors & buttons, you should do this after the CSS above.

---

The original code (see snippet) in this answer was completely different and incomplete.

/* 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，我建议你只使用链接类。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-link">Link</button>

链接地址: http://www.djcxy.com/p/36514.html

上一篇: Twitter Bootstrap按钮文本字换行

下一篇: 如何让按钮看起来像一个链接？