Link-like buttons

Sometimes you want to make a button look like a link. For example, in an admin interface you might want to have “links” to edit and delete articles. The “edit” link will be a normal link. But for the “delete” link you “cannot” use a normal link, because a delete action changes the state on the server and hence it should be performed using POST. Therefore the need for a button.

Thanks to CSS it should be easy to make a button look like a link, that’s what I thought when I started. But as usual when I work with CSS, what seems to be easy is not that easy… Anyway, here is the solution:

First the HTML code. Nothing special here, the only thing to note is that I had to use a “button” instead of an “input” element due to some CSS issues with Konqueror.

<form action="/article/1" method="post">
  <p>
    <button type="submit" class="link"><span>Delete</span></button>
  </p>
</form>

And here the CSS (thanks to Natalie Downe for her article Styling buttons to look like links, from where I got some of the settings below):

button.link {
  -moz-user-select: text;
  background: none;
  border: none;
  cursor: pointer;
  color: blue;
  font-size: 1em;
  margin: 0;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  overflow: visible;
  width: auto;
}

This worked fine in Konqueror, but in Firefox there was always a padding of 2px. And of course I had no clue why. As you can see in the CSS snippet above, the padding was already set to 0… Fortunately, I found the solution in a comment of the aformentioned article:

button::-moz-focus-inner {
  padding: 0;
  border: none;
}

To use such link-like buttons in your own application you have to adapt the CSS to your own needs.

Have fun :)