mezzoblue: Anchor Buttons

By Jamie Stuart, at 09:20:15 on 2008-09-18.

2008-09-18T09:20:15-08:00

We use 'sexy' css buttons from

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

They work pretty well, especially in IE.

By Dave S., at 10:57:27 on 2008-09-18.

2008-09-18T10:57:27-08:00

Ah, right, the IE submit problem. Goes to show how much time I do back-end processing, I'd completely forgotten about that.

So, no, I don't have a fix for that; I was mainly interested in the front end here.

By Juliano Moreira, at 15:28:39 on 2008-09-18.

2008-09-18T15:28:39-08:00

@wolf: Did you figure out how to get rid of the black border?
@Dave: You've got a neat example of how to style buttons and anchors but it seems to me that you spent a quiet some time working on that. I've been working on a similar solution myself without being success yet. Getting the images to line up is the hard part. I don't know if you noticed it but your buttons flickr back and forth between images in IE/6 and IE/7 It's weird!

By Wolf, at 00:35:37 on 2008-09-19.

2008-09-19T00:35:37-08:00

@Juliano Moreira: no, I never figured that one out, I don't think it's possible.

By Ignacio Ricci, at 07:08:28 on 2008-09-19.

2008-09-19T07:08:28-08:00

I don't like it much.

I prefer CSS Globe's way,
http://cssglobe.com/lab/button/

or Google Analytics way.
(Inspect google analytics button, with Firebug and check it out).

By Jeremy Keith, at 04:46:02 on 2008-09-22.

2008-09-22T04:46:02-08:00

Nate, I think the trick with the BUTTON element is to use it only to submit a form, but not to submit any information itself. For that, use INPUT elements (type="hidden").

This was the subject of recent discussion on Drew's site:
http://allinthehead.com/retro/330/coping-with-internet-explorers-mishandling-of-buttons

By Adam Bryson, at 08:13:52 on 2008-09-22.

2008-09-22T08:13:52-08:00

I also have had to fight the problem of a black border around button elements in IE. Very annoying. I think cross browser functionality has been my biggest challenge in every project this year.

By Gerben, at 08:49:24 on 2008-09-23.

2008-09-23T08:49:24-08:00

Somehow the outline on the anchor, when it is focused, is no longer visible in Firefox (3). This is kind of an accessibility issue.
The buttons are working fine.

By Marcel Feenstra, at 15:42:47 on 2008-09-25.

2008-09-25T15:42:47-08:00

@Ignacio Ricci: I believe those are all *buttons*, not buttons and *anchors* styled similarly!

By Jason Evers, at 20:54:02 on 2008-10-29.

2008-10-29T20:54:02-08:00

I still can't get over the havoc that the text-transform property wreaks in IE6 on button styling..

I was pulling my hair out on a button with a background image and perhaps it was a magical combo of previous junk-perties assigned trying to get it to work, but upon distillation of the CSS, IE6 rendered the text-transform: uppercase to act as an image replacement's negative text indent... Whoa.