CSS Styling Buttons Problem with Underlined Text

I ran into the challenge the other day to style a<button> element to make it look like a link (with underline and everything).

Unfortunately, the <button> element does not react to text-decoration: underline;

But according to a discussion at the CSS Creator forum, there is a way out:

I was just messing around with it and for some reason this doesn’t work:
input {text-decoration:underline;}
but this does:
input {text-decoration:underline;float:left;}

Don’t ask me… I can’t explain this one.


I ended up implementing it as display:inline-block; which also works fine. Here is my final rules for styling buttons as links

.clickable, button.tertiary, input.tertiary{
  color: #339;
  text-decoration: underline;
  display: inline-block; /* else underline won't work */
  cursor: pointer;
  border: none;
  background-color: transparent;
  font-size: 1em;
  padding: 0;
.clickable:hover, button.tertiary:hover, input.tertiary:hover{
  text-decoration: underline;
  color: #669;

One Response to “CSS Styling Buttons Problem with Underlined Text”

  1. Paula Says:

    Does this work across all browsers?

    It sounds a little hacky…