Largely inspired by Gmail buttons, combined with Twitter’s simple but elegant buttons plus a blog post on “realistic looking buttons with CSS3“… I have attempted to make a “cheap” (minimal code) replica of said buttons.
My objective is to have similar looking buttons to put in pre-production or internal use only projects. So the problems in IE8 are negligible to me since the people I work with and I don’t use IE. Ultimately, when a design is fleshed out by our designer, we generally use an HTML service for production HTML/CSS which results in buttons that are a lot more complex.
A few problems are:
- The elements for a “group” of buttons must have no space between each other.
- Padding is bad for <input> and <button> elements in IE.
- Positioning is bad for <a> elements in IE.
And the code:
Disclaimer: HTML/CSS is my second language. I am by no means an expert.