[css] 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?

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. It is especially 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 common 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;
  -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;
  }
}

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 a live-demo.

Please also note that this applies the default anchor-styling to buttons (e.g. 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. */_x000D_
_x000D_
input[type="button"], input[type="button"]:focus, input[type="button"]:active,  _x000D_
button, button:focus, button:active {_x000D_
 /* Remove all decorations to look like normal text */_x000D_
 background: none;_x000D_
 border: none;_x000D_
 display: inline;_x000D_
 font: inherit;_x000D_
 margin: 0;_x000D_
 padding: 0;_x000D_
 outline: none;_x000D_
 outline-offset: 0;_x000D_
 /* Additional styles to look like a link */_x000D_
 color: blue;_x000D_
 cursor: pointer;_x000D_
 text-decoration: underline;_x000D_
}_x000D_
/* Remove extra space inside buttons in Firefox */_x000D_
input[type="button"]::-moz-focus-inner,_x000D_
button::-moz-focus-inner {_x000D_
    border: none;_x000D_
    padding: 0;_x000D_
}

If you don't mind using twitter bootstrap I suggest you simply use the link class.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">_x000D_
<button type="button" class="btn btn-link">Link</button>

I hope this helps somebody :) Have a nice day!

You can achieve this using simple css as shown in below example

button {_x000D_
    overflow: visible;_x000D_
    width: auto;_x000D_
}_x000D_
button.link {_x000D_
    font-family: "Verdana" sans-serif;_x000D_
    font-size: 1em;_x000D_
    text-align: left;_x000D_
    color: blue;_x000D_
    background: none;_x000D_
    margin: 0;_x000D_
    padding: 0;_x000D_
    border: none;_x000D_
    cursor: pointer;_x000D_
   _x000D_
    -moz-user-select: text;_x000D_
 _x000D_
    /* override all your button styles here if there are any others */_x000D_
}_x000D_
button.link span {_x000D_
    text-decoration: underline;_x000D_
}_x000D_
button.link:hover span,_x000D_
button.link:focus span {_x000D_
    color: black;_x000D_
}

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

I think this is very easy to do with very few lines. here is my solution

.buttonToLink{
   background: none;
   border: none;
   color: red
}

.buttonToLink:hover{
   background: none;
   text-decoration: underline;
}

<button  class="buttonToLink">A simple link button</button>

You can't style buttons as links reliably throughout browsers. I've tried it, but there's always some weird padding, margin or font issues in some browser. Either live with letting the button look like a button, or use onClick and preventDefault on a link.

try using the css pseudoclass :focus

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

edit as for links and onclick events use (you shouldn’t use inline javascript eventhandlers, but for the sake of simplicity i will use them here):

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

with this.href you can even access the target of the link in your function. return false will just prevent browsers from following the link when clicked.

if javascript is disabled the link will work as a normal link and just load some/page.php—if you want your link to be dead when js is disabled use href="#"