justaddwater.dk

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;}
and
input{text-decoration:underline;display:block;}
and
input{text-decoration:underline;position:absolute;}

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

Interesting!

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;
}

This entry was posted by Jesper Rønn-Jensen on Wednesday, September 16th, 2009 at 10:32 (GMT-1) and is filed under CSS, Web Development, Web Standards. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.