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.
[...] original here: Gmail/Twitter/OSX Style Buttons with CSS | drew If you enjoyed this article please consider sharing [...]
Add the following to the css and you are more flexible with positioning, even in IE6-8:
.btn { display: inline-block; }
* html .btn { display: inline; zoom: 1; } /* IE6 */
*+html .btn { display: inline; zoom: 1; } /* IE7 */
the IE6 and IE7 rule could/should be in a conditional comment without the star hack
Thanks Aicke! Much appreciated. I’ll incorporate that.
[...] buttons. Firstly this blog goes into some detail about the process and then the idea is also taken up and simplified by others. I think the best part about this is it shows how CSS3, far from being [...]