26 Comments
- inactive, on 10/11/2007, -3/+35More like bulletproof way to add a lot of markup and css bloat.
Sliding doors still rules for making this kind of thing. With some modification to whats on ALA you can make it even better. - jasonlich, on 10/11/2007, -1/+22Sliding doors: http://alistapart.com/articles/slidingdoors/
- negativefx, on 10/11/2007, -1/+19somebody better round the corners! we have too many mac users that would cut themselves if the corners are too sharp :(
they really need to put a warning message on any button that isn't made to mimic aqua. - scoot2006, on 10/11/2007, -1/+19very nice. can't wait til css3 is in full swing with it's nice multiple background image support. that'll take the extra markup out of the game.
- inactive, on 10/11/2007, -2/+13A few? Its taken what, 10 years to get to CSS2.x support, and even still IE half asses that.
Why can't Microsoft just ditch the IE product and focus strictly on its OS, and ship Windows with FF and Opera? - nudedave, on 10/11/2007, -2/+9Buttons that are not marked up as buttons upset me... :(
- Onwlyix, on 10/11/2007, -1/+6Okay?
A successfull bulletproof image-based button should:
* Automatically grow horizontally to fit any amount of text
* Grow horizontally and vertically if text size is increased or if the text wraps to multiple lines
* Retain its appearance within reasonable limits
* Be able to have rounded (or other non-square) corners
* Have no unclickable areas
* Be readable when images are disabled
With the exception of no unclickable areas, I do that kind of thing all the time with content boxes in HTML. No CSS needed. - strictnein, on 10/11/2007, -4/+8"Why can't Microsoft just ditch the IE product and focus strictly on its OS, and ship Windows with FF and Opera?"
They should stop supporting the #1 browser? With, what, 75-80% of the market? That makes sense. - InsomniaSlim, on 10/11/2007, -1/+5I don't understand why this comment was dugg down... it's true. CSS3 will support multiple image background (top, left, bottom, right), so this extraneous markup can finally be tossed.
Unfortunately it will take a few years, considering we'll have to wait for older versions of major browsers to leave the wild. - rmulhern, on 10/11/2007, -0/+4@nudedave:
I think you have to separate out things that look like a button and things that function as a button when using the button markup. I'm sure there are plenty of cases where people use images that make something look like a button on things that function as links or really just run a javascript function, the button markup should only be used on things that actually perform button functionality. Just because you choose to make something look like a button doesn't mean it deserves a button markup.
I'm done saying the word button today. - dshPls, on 10/11/2007, -0/+3Not enough rounded corners.
- rmulhern, on 10/11/2007, -0/+3Yeah, that's what I thought, way too much markup. I'm still a fan of this way http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html although it doesn't allow your buttons to vary in height without writing more CSS.
- inactive, on 10/11/2007, -3/+6Its not #1 by choice, its forced on all the users. I'm sure a lot of people don't even know other browsers, better browsers, exist. Either fix up IE and stop being non standard and unhook it from the damned OS files, or ship with other browsers.
- pintong, on 10/11/2007, -0/+3"They should stop supporting the #1 browser? With, what, 75-80% of the market?"
If they actually supported the market, that'd be one thing. When they were developing IE7, they asked via their blog what designers and developers were looking for in a browser. The community grabbed them by the collar and screamed "STANDARDS!" and we were left with the mess IE7 is. - dan7600, on 10/11/2007, -0/+2I need a new screen now.
- inactive, on 10/11/2007, -1/+3Uh. A button with text on it. Wow.
yeah. impressive. - resplence, on 10/11/2007, -0/+1*YAWN*
Besides being something totally new, that's a great solution to clean markup. If you think clean markup is a problem, that is.
It's also funny how he tries to disguise his presentation naming of classes by using just the first letter. Sure, it's a bad practice to name a class "right", but "r" is ok. (Even though in this example it wouldn't really matter much, since this is a snippet of code to do something that will always behave an specific way.)
*edit: kevin45 partially beat me to it* - slapthemonkey, on 10/11/2007, -0/+1Will try and then only can say.
- FastZ, on 10/11/2007, -0/+1I bet it's not really bulletproof. Bessie, hun, grab my gun....
- Stonekeeper, on 10/11/2007, -1/+2"They should stop supporting the #1 browser? With, what, 75-80% of the market? That makes sense."
That's like saying "What? Stop being a monopoly? With, what, 75-80% of the Market? That makes sense." - seandfeeney, on 10/11/2007, -1/+1http://duggmirror.com/design/Creating_bulletproof_graphic_link_buttons_with_CSS
- inactive, on 10/11/2007, -4/+1this is the problem with designers and developers these days. they're solving problems that don't even exist. if youre using anything but an input tag for a button, then youve messed up. period.
- Topher06, on 10/11/2007, -5/+0And a button image is a button just because it looks like a button? It must then be easilly acessible just because it looks like a button right?
He's wrapping CSS around a link which is just as accesible as if you used an anchor with an image that looks like a button. Also, CSS is reusable, create one style and it works with any text. So you would really rather pay a graphics designer to develop 100 button images, all looking the same except have different text on them and different sizes rather then one quick reusable class that someone has already taken the time to do. What if your website is in different languages, then you have to multiply 100 by however many languages you want to support. I don't know, I wouldn't pay someone to make 1000 button images instead of one quick reusable class.
Your knowledge of web design leads me to believe you must be a manager or executive, or just an *sshole.


What is Digg?
Check out the new & improved