Planet CakePHP

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.

Delete

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