Gmail/Twitter/OSX Style Buttons with CSS
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.
The end result in FireFox:
![]()
The end result in Safari/Chrome:
![]()
The end result in IE8: (yes, IE is not so great)
![]()
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.
Download
And the code:
Disclaimer: HTML/CSS is my second language. I am by no means an expert.
